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>
OK，出來了，但有點瑕疵，那么問題來了，左右邊框描邊雖然可以做旋轉(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>
OK，又出來了，但還是有點瑕疵，那么問題來了，就是改變描邊位置（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>
OK，又出來了，那么問題來了，到底用哪一種好呢，這都是因人而異，我只不過是給出了這些方案，僅供大家參考，如果大家有更好的方法可以貼出來大家共同探討

轉載于:https://www.cnblogs.com/thongyan/p/5800760.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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