利用CSS3的線性漸變linear-gradient制作邊框的示例

CSDN Blog 發(fā)布時(shí)間：2016-06-02 11:07:16 作者：fareise

linear-gradient線條用來(lái)制作邊框還是比較給力的,尤其是利用其描邊可以制作一些復(fù)制的邊框效果,這里我們就來(lái)看一下利用CSS3的線性漸變linear-gradient制作邊框的示例

一般的app邊框描邊的線都小于一像素，那么我就像往常一樣直接描了1px的邊框，雖然是1px可是結(jié)果和app里的描邊完全不一樣“粗了”，所以就在網(wǎng)找了一下看看有沒(méi)有解決方法，可是找了一會(huì)沒(méi)找到，那咋辦，需求方不愿意不要這么粗，那就只能自己解決了。
所以用上個(gè)方法聯(lián)想到了線性漸變（linear-gradient）

CSS Code復(fù)制內(nèi)容到剪貼板

.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復(fù)制內(nèi)容到剪貼板

<ul class="line">
<li>linear-gradient</li>
<li>linear-gradient</li>
<li>linear-gradient</li>
</ul>

OK，又出來(lái)了，但還是有點(diǎn)瑕疵，那么問(wèn)題來(lái)了，就是改變描邊位置（left，top，right，bottom）需要修改參數(shù)

如 left描邊需要改變：

CSS Code復(fù)制內(nèi)容到剪貼板

background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%);
background-size: 1px 100%;
background-position: left;

具體的都不一一列出了。

利用linear制作復(fù)雜的邊框效果
另外，在網(wǎng)上看到一種利用linear-gradient屬性制作絢麗邊框效果的方法。首先給出代碼，大家可以在自己的電腦中查看效果：

CSS Code復(fù)制內(nèi)容到剪貼板

<!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>
<div class="box first"></div>
<div class="box second"></div>
<div class="box third"></div>
</body>
</html>

有代碼可以看出，其實(shí)我們并沒(méi)有使用border，那么這種邊框效果是怎么實(shí)現(xiàn)的呢？
總體思路是，我們先定義一個(gè)白色的div，在定義一個(gè)白色方塊大一圈的帶顏色的div。兩個(gè)重疊一下，并且讓白色的div覆蓋彩色div，就實(shí)現(xiàn)了邊框的效果。
這里面用到的css知識(shí)點(diǎn)很多。
1、:before偽類
通過(guò)上面的代碼我們看出，其實(shí)我們?cè)诙x的白色div中定義了一個(gè):before偽類，把彩色方塊所有的樣式都放在了這里。這是因?yàn)槭褂?before定義可以使得定位更加方便，只要調(diào)整top和left為邊框的寬度就可以了。同時(shí)也是的二者成為一個(gè)整體。
2、linear-gradient
現(xiàn)在很多瀏覽器都支持這個(gè)css方法。該方法有以下三種使用模式：
①background:linear-gradient(top,#fff,#000)
這段代碼的意思是，從上部開(kāi)始為白色，到底部為黑色進(jìn)行過(guò)度。
②background:linear-gradient(top,right,#fff,#000)
這段代碼關(guān)于位置傳遞了兩個(gè)參數(shù)，top和right，表示從右上放開(kāi)始，到左下方變化，其他道理與第一個(gè)相同。
③background:linear-gradient(30deg,#fff,#000)
這段代碼的第一個(gè)參數(shù)傳遞的是角度，其實(shí)道理和位置是一樣的，只是不是從標(biāo)準(zhǔn)的位置開(kāi)始變化了。那么角度和位置的對(duì)應(yīng)關(guān)系是什么呢？根據(jù)實(shí)驗(yàn)，0度對(duì)應(yīng)bottom，90度對(duì)應(yīng)left，180度對(duì)應(yīng)top，360度對(duì)應(yīng)right。
以上就是利用linear方法實(shí)現(xiàn)絢麗邊框的代碼和解釋，大家可以在本地進(jìn)行實(shí)現(xiàn)，以此發(fā)現(xiàn)更多新奇的組合實(shí)現(xiàn)方法。