APP開(kāi)發咨詢熱(rè)線：
人(rén)
已閱讀(dú)
已閱讀(dú)
網頁前端開(kāi)發技(jì)巧之細邊框的(de)幾個(gè)寫法
來(lái)源：lexintech.com →¥ 發布時(shí)間(jiān)：2018-07-® 17
我們在進行(xíng)網頁開(kāi)發時(shí)，經常會(huì∞λ)遇到(dào)一(yī)些(xiē)1px的(de)細邊框或細線條。比↕₩如(rú)下(xià)圖的(de)列表頁面，每行(xín¥♠g)列表之間(jiān)的(de)灰色細線條分(fēn)隔線。
一(yī)般的(de)app邊框描邊的(de✘≤₽ )線都(dōu)小(xiǎo)于一(yī)像素，那(n©&à)麽我就(jiù)像往常一(yī)樣直接描了(le)1px的(de)φ'γ÷邊框，雖然是(shì)1px可(kě)是(shì)結果和(hé)app裡(lπ∑ǐ)的(de)描邊完全不(bù)一(yī)樣“粗了(le)&rd£¥™quo;，所以就(jiù)需要(yào)一(yī)些≥ ₹(xiē)技(jì)巧來(lái)解決這(zhè)₩↔'∞個(gè)問(wèn)題。
1，做(zuò)一(yī)張高(gāo)2像素（1像↑×↕素有(yǒu)顔色1像素沒顔色）的(de)圖片做(zuò)背景，bg-s✘∞ ize設置寬100%，高(gāo)1px
.line li{
₹∏; background: url('line.∞₹"png') left top no-repeat;
βγ&₩ background-size:• Ω 100% 1px;
&nβ∞αbsp; background-position¶✔∞♥: left bottom;}
<ul class=" line">
<li>&δπlt;/li>
<li></li>
<li≈₹ ></li>
</ul>
這(zhè)個(gè)方式可(kě)以，但(dàn)有(yǒu)點瑕疵，ש'σ那(nà)麽問(wèn)題來(lái)了(le)，左右邊框描邊雖然可(kě↕)以做(zuò)旋轉(transform) ，但(dàn)如(rú)果要(yàγ• o)是(shì)邊框更換顔色那(nà)不(bù)是(sβ♦hì)還(hái)要(yào)在做(zuò)圖片了(le)，好(∞÷™☆hǎo)像是(shì)有(yǒu)點麻煩哦；
2，所以用(yòng)上(shàng)個₽♣₹™(gè)方法聯想到(dào)了(le)線性漸變（linear-gradi♥∞♦ ent）
.line li{ border'σ: none;
background-image₩™≠: -webkit-linear-gradient(#22 $€€2 50%,transparent 50%);¥λ₩
background-image: -moz-linear← ☆≈-gradient(#222 50%,transp©≈→λarent 50%);
background-image: -o-l$α≤inear-gradient(#222 50%,transp→®÷arent 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-graα★dient</li>
<li&∏↑gt;linear-gradient</li>
<li>linear-gra₹>dient</li>
</ul>
這(zhè)個(gè)方式還(hái)是($☆≈shì)有(yǒu)點瑕疵，改變描邊位置 ←（left，top，right，bottom）需要(yào)修改參數£>(shù)。
如(rú) left描邊需要(yào)改變：
background-image: -webkit-≤©linear-gradient(left ,transparent 50%,#≈β222 50%);
background-size: 1p ₹x 100%;
background-position: left;
都(dōu)不(bù)一(yī)一(yī)列出了(le)，好(hǎo)像還←↕∏≠(hái)是(shì)有(yǒu)點麻煩；
3，用(yòng)CSS3陰影(yǐng)（box-shadow®≥☆），就(jiù)是(shì)用(yòng)陰影(yǐn∏₩✘"g)做(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:&≠✔δ∑#39;';position: absolutδΩe;top:0;left: 0px;right: 0p₽♣x;bottom: 0px;border: 1px s₹φolid #fff;}
<ul class="line">
<li>box-sha∏€®dow</li>
<li>✔∏box-shadow</li>
<li>boxᙣ-shadow</li>
</ul>
OK，這(zhè)樣子(zǐ)好(hǎo)多(₩★↔≈duō)了(le)。到(dào)底用(yòng)哪一(yī)種好(hǎ★÷"↕o)呢(ne)，這(zhè)都(dōu)是(shì)因人(rén)而異βγ♠，我隻不(bù)過是(shì)給出了(le)這(zhè)些(xiē)方案，±×僅供大(dà)家(jiā)參考，具體(tǐ)的(de)方案還(hái♦εε)需要(yào)大(dà)家(jiā)在各自(zì)的(de)項目中根據具體(↔&&tǐ)情況來(lái)決定。
- 上(shàng)一(yī)篇：響應式網站(zhàn)設計(jì)的(de)圖片處理(lǐ)技(jì)巧
- 下(xià)一(yī)篇：網站(zhàn)開(kāi)發之頁面版式π≥•設計(jì)圖版率
電(diàn)話(huà)：
郵箱：
地(dì)址：
