網頁前端開發技巧之細邊框的(de)幾個(gè)寫法

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

 

 

一般的(de)app邊框描邊的(de)線都小于一像素，那麽我就像往常一樣直接描了(le)1px的(de)邊框，雖然是1px可(kě)是結果和(hé)app裏的(de)描邊完全不一樣“粗了(le)”，所以就需要一些技巧來(lái)解決這(zhè)個(gè)問題。

 

1，做(zuò)一張高(gāo)2像素（1像素有顔色1像素沒顔色）的(de)圖片做(zuò)背景，bg-size設置寬100%，高(gāo)1px

 

.line li{  

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

            background-size: 100% 1px;

            background-position: left bottom;}

 

<ul class="line">

    <li></li>

    <li></li>

    <li></li>

</ul>

 

這(zhè)個(gè)方式可(kě)以，但有點瑕疵，那麽問題來(lái)了(le)，左右邊框描邊雖然可(kě)以做(zuò)旋轉(transform) ，但如果要是邊框更換顔色那不是還(hái)要在做(zuò)圖片了(le)，好像是有點麻煩哦；

 

2，所以用(yòng)上個(gè)方法聯想到了(le)線性漸變（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;}

 

<ul class="line">

    <li>linear-gradient</li>

    <li>linear-gradient</li>

    <li>linear-gradient</li>

</ul>

 

這(zhè)個(gè)方式還(hái)是有點瑕疵，改變描邊位置（left，top，right，bottom）需要修改參數。

如 left描邊需要改變：

 

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

background-size:  1px 100%;

background-position: left;

都不一一列出了(le)，好像還(hái)是有點麻煩；

 

3，用(yòng)CSS3陰影(yǐng)（box-shadow），就是用(yòng)陰影(yǐng)做(zuò)描邊然後用(yòng)僞類把多(duō)餘的(de)給遮罩著(zhe)，

 

.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;}

 

<ul class="line">

    <li>box-shadow</li>

    <li>box-shadow</li>

    <li>box-shadow</li>

</ul>

OK，這(zhè)樣子好多(duō)了(le)。到底用(yòng)哪一種好呢(ne)，這(zhè)都是因人(rén)而異，我隻不過是給出了(le)這(zhè)些方案，僅供大(dà)家參考，具體的(de)方案還(hái)需要大(dà)家在各自的(de)項目中根據具體情況來(lái)決定。