一般的app邊框描邊的線都小于一像素，那么我就像往常一樣直接描了1px的邊框，雖然是1px可是結果和app里的描邊完全不一樣“粗了”，所以就在網找了一下看看有沒有解決方法，可是找了一會沒找到，那咋辦，需求方不愿意不要這么粗，那就只能自己解決了。
所以用上個方法聯想到了線性漸變（linear-gradient）
CSS Code復制內容到剪貼板
.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: bottombottom;}
XML/HTML Code復制內容到剪貼板
<ul class="line">
<li>linear-gradient</li>
<li>linear-gradient</li>
<li>linear-gradient</li>
</ul>
OK，又出來了，但還是有點瑕疵，那么問題來了，就是改變描邊位置（left，top，right，bottom）需要修改參數
如 left描邊需要改變：
CSS Code復制內容到剪貼板
background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%);
background-size: 1px 100%;
background-position: left;
具體的都不一一列出了。
利用linear制作復雜的邊框效果
另外，在網上看到一種利用linear-gradient屬性制作絢麗邊框效果的方法。首先給出代碼，大家可以在自己的電腦中查看效果：
CSS Code復制內容到剪貼板
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box {
margin: 80px 30px;
width: 200px;
新聞熱點
疑難解答
