這篇文章主要介紹了關於如何利用CSS3的線性漸變linear-gradient製作邊框，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
linear-gradient線條用來製作邊框還是比較給力的,尤其是利用其描邊可以製作一些複製的邊框效果,這裡我們就來看一下利用CSS3的線性漸變linear-gradient製作邊框的示例
一般的app邊框描邊的線都小於一像素，那麼我就像往常一樣直接描了1px的邊框，雖然是1px可是結果和app裡的描邊完全不一樣“粗了”，所以就在網找了一下看看有沒有解決方法，可是找了一會兒沒找到，那咋辦，需求方不願意不要這麼粗，那就只能自己解決了。
所以用上一個方法聯想到了線性漸變（linear-gradient）
CSS
.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
<ul class="line">
<li>linear-gradient</li>
<li>linear-gradient</li>
<li>linear-gradient</li>
</ul>OK，又出来了，但还是有点瑕疵，那么问题来了，就是改变描边位置（left，top，right，bottom）需要修改参数如left描邊需要改變：
CSS
background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%); background-size: 1px 100%; background-position: left;
具體的都不一一列出了。
利用linear製作複雜的邊框效果
另外，在網路上看到利用linear-gradient屬性製作絢麗邊框效果的方法。先給程式碼，大家可以在自己的電腦中查看效果：
CSS
<!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;
height: 200px;
position: relative;
background: #fff;
float: left;
}
.box:before {
content: '';
z-index: -1;
position: absolute;
width: 220px;
height: 220px;
top: -10px;
left: -10px;
}
.first:before {
background-image: linear-gradient(90deg, yellow, gold);
}
.second:before {
background-image: linear-gradient(0deg, orange, red);
}
.third:before {
background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);
}
</style>
</head>
<body>
<p class="box first"></p>
<p class="box second"></p>
<p class="box third"></p>
</body>
</html> 有代码可以看出，其实我们并没有使用border，那么这种边框效果是怎么实现的呢？整體思路是，我們先定義一個白色的p，在定義一個白色方塊大一圈的帶顏色的p。兩個重疊一下，並且讓白色的p覆蓋彩色p，就實現了邊框的效果。
這裡面用到的css知識點很多。
1、:before偽類
透過上面的程式碼我們看出，其實我們在定義的白色p中定義了一個:before偽類，把彩色方塊所有的樣式都放在了這裡。這是因為使用:before定義可以使得定位更方便，只要調整top和left為邊框的寬度就可以了。同時也是的二者成為一個整體。
2、linear-gradient
現在很多瀏覽器都支援這個css方法。此方法有以下三種使用模式：
①background:linear-gradient(top,#fff,#000)
這段程式碼的意思是，從上部開始為白色，到底部為黑色進行過度。
②background:linear-gradient(top,right,#fff,#000)
這段程式碼關於位置傳遞了兩個參數，top和right，表示從右上放開始，到左下方變化，其他道理與第一個相同。
③background:linear-gradient(30deg,#fff,#000)
這段程式碼的第一個參數傳遞的是角度，其實道理和位置是一樣的，只是不是從標準的位置開始改變了。那麼角度和位置的對應是什麼呢？根據實驗，0度對應bottom，90度對應left，180度對應top，360度對應right。
以上就是利用linear方法實現絢麗邊框的程式碼和解釋，大家可以在本地進行實現，以此發現更多新奇的組合實現方法。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
以上是如何利用CSS3的線性漸變linear-gradient製作邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章！
