WordPress網頁前端開發技巧之細邊框有哪些寫法？

我們在進行網頁開發時，經常會遇到一些 1px 的細邊框或細線條。比如下圖的列表頁面，每行列表之間的灰色細線條分隔線。

　　網頁前端開發技巧之細邊框的幾個寫法

　　一般的 WordPress APP 邊框描邊的線都小於一畫素，那麼我就像往常一樣直接描了 1px 的邊框，雖然是 1px 可是結果和 WordPress APP 裡的描邊完全不一樣 “粗了”，所以就需要一些技巧來解決這個問題。

　　1，做一張高 2 畫素（1 畫素有顏色 1 畫素沒顏色）的圖片做背景，bg-size 設定寬 100%，高 1px

　　.line li{

　　background:url(‘line.png’)left top no-repeat;

　　background-size:100%1px;

　　background-position:left bottom;}

　　</ul>

　　這個方式可以，但有點瑕疵，那麼問題來了，左右邊框描邊雖然可以做旋轉 (transform)，但如果要是邊框更換顏色那不是還要在做圖片了，好像是有點麻煩哦；

　　2，所以用上個方法聯想到了線性漸變（linear-gradient）

　　.line li{border:none;

　　background-image:-webkit-linear-gradient(#222 50%,transparent 50%);

　　background-image:-moz-linear-gradient(#222 50%,transparent 50%);

　　background-image:-o-linear-gradient(#222 50%,transparent 50%);

　　background-image:linear-gradient(#222 50%,transparent 50%);

　　background-size:100%1px;

　　background-repeat:no-repeat;

　　background-position:bottom;}

　　<li>linear-gradient</li>

　　</ul>

　　這個方式還是有點瑕疵，改變描邊位置（left，top，right，bottom）需要修改引數。

　　如 left 描邊需要改變：

　　background-image:-webkit-linear-gradient(left,transparent 50%,#222 50%);

　　background-size:1px 100%;

　　background-position:left;

　　都不一一列出了，好像還是有點麻煩；

　　3，用 CSS3 陰影（box-shadow），就是用陰影做描邊然後用偽類把多餘的給遮罩著，

　　.line li{box-shadow:inset 0-1px 1px#000;background:#fff;margin-left:-1px;margin-bottom:10px;position:relative;}

　　.line li::after{content:”;position:absolute;top:0;left:0px;right:0px;bottom:0px;border:1px solid#fff;}

　　<li>box-shadow</li>

　　</ul>

　　OK，這樣子好多了。到底用哪一種好呢，這都是因人而異，我只不過是給出了這些方案，僅供大家參考，具體的方案還需要大家在各自的專案中根據具體情況來決定。

WordPress 網頁前端開發技巧之細邊框有哪些寫法？