網(wǎng)頁前端開發(fā)技巧之細邊框有哪些寫法
時間：2023-09-20
我們在進行網(wǎng)頁開發(fā)時，經(jīng)常會遇到一些1px的細邊框或細線條。比如下圖的列表頁面，每行列表之間的灰色細線條分隔線。
網(wǎng)頁前端開發(fā)技巧之細邊框的幾個寫法 一般的app邊框描邊的線都小于一像素，那么我就像往常一樣直接描了1px的邊框，雖然是1px可是結(jié)果和app里的描邊完全不一樣“粗了”，所以就需要一些技巧來解決這個問題。 1，做一張高2像素（1像素有顏色1像素沒顏色）的圖片做背景，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> 這個方式可以，但有點瑕疵，那么問題來了，左右邊框描邊雖然可以做旋轉(zhuǎn)(transform)，但如果要是邊框更換顏色那不是還要在做圖片了，好像是有點麻煩哦； 2，所以用上個方法聯(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> 這個方式還是有點瑕疵，改變描邊位置（left，top，right，bottom）需要修改參數(shù)。 如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;} <ul class="line"> <li>box-shadow</li> <li>box-shadow</li> <li>box-shadow</li> </ul> OK，這樣子好多了。到底用哪一種好呢，這都是因人而異，我只不過是給出了這些方案，僅供大家參考，具體的方案還需要大家在各自的項目中根據(jù)具體情況來決定。
