網(wǎng)頁(yè)前端開(kāi)發(fā)技巧之細(xì)邊框的幾個(gè)寫(xiě)法

我們?cè)谶M(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)時(shí)，經(jīng)常會(huì)遇到一些1px的細(xì)邊框或細(xì)線條。比如下圖的列表頁(yè)面，每行列表之間的灰色細(xì)線條分隔線。

 

 

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

 

1，做一張高2像素（1像素有顏色1像素沒(méi)顏色）的圖片做背景，bg-size設(shè)置寬100%，高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>

 

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

 

2，所以用上個(gè)方法聯(lián)想到了線性漸變（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>

 

這個(gè)方式還是有點(diǎn)瑕疵，改變描邊位置（left，top，right，bottom）需要修改參數(shù)。

如 left描邊需要改變：

 

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

background-size:  1px 100%;

background-position: left;

都不一一列出了，好像還是有點(diǎn)麻煩；

 

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

 

<ul class="line">

    <li>box-shadow</li>

    <li>box-shadow</li>

    <li>box-shadow</li>

</ul>

OK，這樣子好多了。到底用哪一種好呢，這都是因人而異，我只不過(guò)是給出了這些方案，僅供大家參考，具體的方案還需要大家在各自的項(xiàng)目中根據(jù)具體情況來(lái)決定。