在app應用開發中，我們常常都需要用到css3來設置應用的樣式。由于app都是在移動設備上進行展示，所以邊框描邊的線一般都小于1px，而以往我們使用的都是1px及以上的。那么問題來了，對于小于1px的邊框怎么處理呢？為大家介紹幾種css3中細線邊框的寫法，希望對遇到類似問題的童鞋有幫助。

1、做一張高2像素（1像素有顏色1像素沒顏色）的圖片做背景，bg-size設置寬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>

這種方法有一個問題，就是左右邊框描邊雖然可以做旋轉(transform) ，但如果要是邊框更換顏色那豈不是還要再做圖片了；

2、通過上面的方法，我們也很容易聯想到線性漸變（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）時需要修改參數，如 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>

雖然，小編分享的幾種方法都還存在瑕疵，具體使用哪種方法，你可以根據你的情況而定。如果你有更完美的解決方案的話，也歡迎分享出來，大家一起學習，一起進步。

總結

以上是生活随笔為你收集整理的CSS 3中细线边框如何实现？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。