css 模擬表格斜線

2024-07-11 08:39:18

字體：大中小

供稿：網(wǎng)友

一般情況下，border都是同樣的顏色，很少會(huì)注意到這個(gè)問(wèn)題，但偏偏反向思考，或者是偶然的機(jī)會(huì)才會(huì)發(fā)現(xiàn)這個(gè)現(xiàn)象。下面是一個(gè)小例子，從中可以看出原理來(lái)。

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

這樣滿足這樣的條件，就會(huì)看到相接處有斜線產(chǎn)生。對(duì)這個(gè)現(xiàn)象進(jìn)一步拓展，利用絕對(duì)定位，便可制作出表格對(duì)角線。

<br /><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br /><html xmlns=”http://www.w3.org/1999/xhtml”><br /><head><br /><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><br /><title>用div+css模擬表格對(duì)角線</title><br /><style type=”text/css”><br />*{padding:0;margin:0;}<br />caption{font-size:14px;font-weight:bold;}<br />table{ border-collapse:collapse;border:1px #525152 solid;width:50%;margin:0 auto;margin-top:100px;}<br />th,td{border:1px #525152 solid;text-align:center;font-size:12px;line-height:30px;background:#C6C7C6;}<br />th{background:#D6D3D6;}<br />/*模擬對(duì)角線*/<br />.out{<br />border-top:40px #D6D3D6 solid;/*上邊框?qū)挾鹊扔诒砀竦谝恍行懈?/<br />width:0px;/*讓容器寬度為0*/<br />height:0px;/*讓容器高度為0*/<br />border-left:80px #BDBABD solid;/*左邊框?qū)挾鹊扔诒砀竦谝恍械谝桓駥挾?/<br />position:relative;/*讓里面的兩個(gè)子容器絕對(duì)定位*/<br />}<br />b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;}<br />em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;} </SPAN> </div> </div> <div id="iwvjtn8m0" class=page1> <p align="center" class="pageLink"></p> </div> <div id="iwvjtn8m0" class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1343122.html'>CSS 樣式命名規(guī)則</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1343124.html'>CSS 選擇符的用法和實(shí)例</a></div> <br> <script src=/d/js/acmsd/gao21.js></script>  </div> <div id="iwvjtn8m0" class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您沒(méi)什么話要說(shuō)嗎？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>發(fā)表評(píng)論</strong></td> <td align="right"><a href="/e/pl/?classid=215&id=1343123">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1343123&down=2"></script></span>條評(píng)論</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用戶名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密碼: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">驗(yàn)證碼: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名發(fā)表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">

學(xué)習(xí)交流