我(wo)們在進(jin)行(xing)網頁開發時，經(jing)常會遇到一些1px的細(xi)邊框(kuang)或(huo)細(xi)線(xian)條(tiao)。比如下(xia)圖的列表(biao)頁面，每(mei)行(xing)列表(biao)之間的灰(hui)色細(xi)線(xian)條(tiao)分隔線(xian)。
網頁前端開發(fa)技巧之細邊(bian)框的幾個寫法
一(yi)般的(de)(de)app邊框描邊的(de)(de)線都小(xiao)于(yu)一(yi)像(xiang)素，那么我就像(xiang)往常一(yi)樣直接描了1px的(de)(de)邊框，雖然是1px可是結果和app里的(de)(de)描邊完全不(bu)一(yi)樣“粗了”，所(suo)以就需要一(yi)些技巧(qiao)來解決(jue)這個(ge)問題。
1，做一張高2像素（1像素有顏色1像素沒顏色）的圖片做背(bei)景，bg-size設置寬100%，高1px
.line li{
background:url('line.png')left top no-repeat;
background-size:100%1px;
background-position:left bottom;}
這(zhe)個方式可以，但有(you)點瑕疵，那(nei)么問題來(lai)了，左右邊框(kuang)(kuang)描(miao)邊雖然可以做旋轉(transform)，但如果要是邊框(kuang)(kuang)更換顏色(se)那(nei)不是還要在做圖片了，好像是有(you)點麻煩哦； 2，所以用上個方法聯想到了線性(xing)漸變（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;}
- linear-gradient
- linear-gradient
- linear-gradient
這個方式(shi)還是有點(dian)瑕疵，改變(bian)描(miao)邊位置（left，top，right，bottom）需(xu)要修改參數。 如left描邊需要改(gai)變： background-image:-webkit-linear-gradient(left,transparent 50%,#222 50%); background-size:1px 100%; background-position:left; 都不一(yi)一(yi)列出了，好像還是有點麻煩； 3，用CSS3陰影（box-shadow），就是用陰影做描(miao)邊然后用偽類把(ba)多余的(de)給(gei)遮罩著， .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;}
- box-shadow
- box-shadow
- box-shadow
OK，這樣子好多了(le)。到底用哪一(yi)種(zhong)好呢，這都是因(yin)人而異，我只不過是給(gei)出了(le)這些方案(an)，僅供大家參考，具(ju)體(ti)的(de)(de)方案(an)還需要大家在各自的(de)(de)項目中根據具(ju)體(ti)情況(kuang)來決定。
