css 模擬表格斜線

2024-07-11 08:27:38

字體：大中小

來源：轉載

供稿：網友

一般情況下，border都是同樣的顏色，很少會注意到這個問題，但偏偏反向思考，或者是偶然的機會才會發現這個現象。下面是一個小例子，從中可以看出原理來。

提示：您可以先修改部分代碼再運行

原理就在這里：

復制代碼

代碼如下:
border-left:#023060 10px solid; /*相鄰的邊框粗細大于1，并且顏色不相同*/
border-right:#366AA1 10px solid;
border-top:#0F2E4E 10px solid;
border-bottom:#548CC7 10px solid;

這樣滿足這樣的條件，就會看到相接處有斜線產生。對這個現象進一步拓展，利用絕對定位，便可制作出表格對角線。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/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-top:100px;} th,td{border:1px #525152 solid;text-align:center;font-size:12px;line-height:30px;background:#C6C7C6;} th{background:#D6D3D6;} /*模擬對角線*/ .out{ border-top:40px #D6D3D6 solid;/*上邊框寬度等于表格第一行行高*/ width:0px;/*讓容器寬度為0*/ height:0px;/*讓容器高度為0*/ border-left:80px #BDBABD solid;/*左邊框寬度等于表格第一行第一格寬度*/ position:relative;/*讓里面的兩個子容器絕對定位*/ } b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;} em{font-style:normal;display:block;position:absolute;top:-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>

上一篇：十個非常實用的CSS屬性(IE不支持)

下一篇：CSS 像素圖制作攻略

發表評論

共有條評論