CSS仿表格斜线效果，CSS中border斜线效果

发布时间：2018-08-17 01:04:18 所属栏目：访谈来源：站长网

导读：大家都知道Word中的表格是可以加斜线的，而在以前的教程，烈火小编也曾经发表过关于网页表格斜线（更简单的）的教程，今天我们就来看一个CSS仿表格斜线效果，CSS中border斜线效果。看似很简单，但是只设置一下Border的边框颜色就能有这样的效果，CSS水平有

　　大家都知道Word中的表格是可以加斜线的，而在以前的教程，烈火小编也曾经发表过关于网页表格斜线（更简单的）的教程，今天我们就来看一个CSS仿表格斜线效果，CSS中border斜线效果。看似很简单，但是只设置一下Border的边框颜色就能有这样的效果，CSS水平有限，欢迎大家一起研究和学习。

　　示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>border产生的斜线效果，想不通</title> <style type="text/css"> /*为啥border-color: #4D4C4C #131313 #131313 #4D4C4C;就能有那个斜线效果，想不通*/ .select_black{border-width:50px; border-style: solid; border-color: #4D4C4C #131313 #131313 #4D4C4C;} .item_colorBox{ margin:10px 0; overflow:hidden; clear:both;} .select_colors{border:1px solid #717171; display:block; height:100px; width:100px; float:left; margin-right:2px; margin-bottom:2px;position:relative; cursor:pointer;} .select_colors:hover{border:1px solid #5C5E5B;} </style> </head> <body> <div class="item_colorBox"> <i title="Black" class="select_colors"><div class="select_black"></div></i> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!