css 模拟表格斜线

建站知识 2021-07-03 08:42www.168986.cn长沙网站建设

一般情况下，border都是同样的颜色，很少会注意到这个问题，但偏偏反向思考，或者是偶然的机会才会发现这个现象。狼蚁网站SEO优化是一个小例子，从中可以看出原理来。

提示您可以先修改部分代码再运行

原理就在这里

复制代码

代码如下:

border-left:#023060 10px solid; /相邻的边框粗细大于1，并且颜色不相同/
border-right:#366AA1 10px solid;
border-:#0F2E4E 10px solid;
border-bottom:#548CC7 10px solid;

这样满足这样的条件，就会看到相接处有斜线产生。对这个现象进一步拓展，利用绝对定位，便可制作出表格对角线。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://.w3./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>用div+css模拟表格对角线</title> <style type="text/css"> {padding:0;margin:0;} caption{font-size:14px;font-weight:bold;} table{ border-collapse:collapse;border:1px #525152 solid;width:50%;margin:0 auto;margin-:100px;} th,td{border:1px #525152 solid;text-align:center;font-size:12px;line-height:30px;background:#C6C7C6;} th{background:#D6D3D6;} /模拟对角线/ .out{ border-:40px #D6D3D6 solid;/上边框宽度等于表格第一行行高/ width:0px;/让容器宽度为0/ height:0px;/让容器高度为0/ border-left:80px #BDBABD solid;/左边框宽度等于表格第一行第一格宽度/ position:relative;/让里面的两个子容器绝对定位/ } b{font-style:normal;display:block;position:absolute;:-40px;left:-40px;width:35px;} em{font-style:normal;display:block;position:absolute;:-25px;left:-70px;width:55x;} .t1{background:#BDBABD;} </style> </head> <body> <table> <caption>用div+css模拟表格对角线</caption> <tr> <th style="width:80px;"> <div class="out"> <b>类别</b> <em>姓名</em> </div> </th> <th>年级</th> <th>班级</th> <th>成绩</th> <th>班级均分</th> </tr> <tr> <td class="t1">张三</td> <td>三</td> <td>2</td> <td>62</td> <td>61</td> </tr> <tr> <td class="t1">李四</td> <td>三</td> <td>1</td> <td>48</td> <td>67</td> </tr> <tr> <td class="t1">王五</td> <td>三</td> <td>5</td> <td>79</td> <td>63</td> </tr> <tr> <td class="t1">赵六</td> <td>三</td> <td>4</td> <td>89</td> <td>66</td> </tr> </table> </body> </html>

提示您可以先修改部分代码再运行

上一篇：hr 样式实现1px直线下一篇：CSS+DIV 拼图(26个英文字母)

css 模拟表格斜线

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

css 模拟表格斜线

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设