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

一般的app邊框描邊的線都小于一像素,那么我就像往常一樣直接描了1px的邊框,雖然是1px可是結(jié)果和app里的描邊完全不一樣“粗了”,所以就在網(wǎng)找了一下看看有沒有解決方法,可是找了一會沒找到,那咋辦,需求方不愿意不要這么粗,那就只能自己解決了。
所以用上個(gè)方法聯(lián)想到了線性漸變(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: bottombottom;}
- <ul class="line">
- <li>linear-gradient</li>
- <li>linear-gradient</li>
- <li>linear-gradient</li>
- </ul>
OK,又出來了,但還是有點(diǎn)瑕疵,那么問題來了,就是改變描邊位置(left,top,right,bottom)需要修改參數(shù)
如 left描邊需要改變:
- background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%);
- background-size: 1px 100%;
- background-position: left;
具體的都不一一列出了。
利用linear制作復(fù)雜的邊框效果
另外,在網(wǎng)上看到一種利用linear-gradient屬性制作絢麗邊框效果的方法。首先給出代碼,大家可以在自己的電腦中查看效果:
- <!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í)我們并沒有使用border,那么這種邊框效果是怎么實(shí)現(xiàn)的呢?
總體思路是,我們先定義一個(gè)白色的div,在定義一個(gè)白色方塊大一圈的帶顏色的div。兩個(gè)重疊一下,并且讓白色的div覆蓋彩色div,就實(shí)現(xiàn)了邊框的效果。
這里面用到的css知識點(diǎn)很多。
1、:before偽類
通過上面的代碼我們看出,其實(shí)我們在定義的白色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)
這段代碼的意思是,從上部開始為白色,到底部為黑色進(jìn)行過度。
②background:linear-gradient(top,right,#fff,#000)
這段代碼關(guān)于位置傳遞了兩個(gè)參數(shù),top和right,表示從右上放開始,到左下方變化,其他道理與第一個(gè)相同。
③background:linear-gradient(30deg,#fff,#000)
這段代碼的第一個(gè)參數(shù)傳遞的是角度,其實(shí)道理和位置是一樣的,只是不是從標(biāo)準(zhǔn)的位置開始變化了。那么角度和位置的對應(yīng)關(guān)系是什么呢?根據(jù)實(shí)驗(yàn),0度對應(yīng)bottom,90度對應(yīng)left,180度對應(yīng)top,360度對應(yīng)right。
以上就是利用linear方法實(shí)現(xiàn)絢麗邊框的代碼和解釋,大家可以在本地進(jìn)行實(shí)現(xiàn),以此發(fā)現(xiàn)更多新奇的組合實(shí)現(xiàn)方法。
相關(guān)文章
CSS 實(shí)現(xiàn)漸變效果小結(jié)( linear-gradient線性漸變 和 radial-gradient徑
這篇文章主要介紹了CSS 實(shí)現(xiàn)漸變效果的代碼( linear-gradient線性漸變 和 radial-gradient徑向漸變),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的2020-04-16CSS3 linear-gradient線性漸變生成加號和減號的方法
本篇文章主要介紹了CSS3 linear-gradient線性漸變生成加號和減號的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-21CSS3,線性漸變(linear-gradient)的使用總結(jié)
今天這篇文章我們在一起來看看 CSS3 中實(shí)現(xiàn)漸變效果的 Gradient 屬性的具體用法。在以前,漸變效果和陰影、圓角效果一樣都是做成圖片,直接編寫 CSS 代碼就可以實(shí)現(xiàn)。2017-01-09- 這篇文章主要為大家詳細(xì)介紹了CSS3 漸變(Gradients)之CSS3 線性漸變的相關(guān)資料,了解學(xué)習(xí)CSS3 線性漸變,感興趣的小伙伴們可以參考一下2016-07-08
- 下面小編就為大家?guī)硪黄钊肫饰鯟SS中的線性漸變linear-gradient。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-12
- 這篇文章主要介紹了CSS3中顏色線性漸變實(shí)戰(zhàn),示例中展示了代碼設(shè)置不同漸變方向的效果,需要的朋友可以參考下2015-07-18
- 這篇文章主要介紹了CSS3中線性顏色漸變的一些實(shí)現(xiàn)方法,包括分Safari和Chrome的webkit內(nèi)核與Firefox的Gecko內(nèi)核兩種情況,需要的朋友可以參考下2015-07-14
- 這篇文章主要介紹了CSS3實(shí)現(xiàn)線性漸變用法詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-07