欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

CSDN Blog   發(fā)布時間：2016-06-02 11:07:16   作者：fareise   我要評論
linear-gradient線條用來制作邊框還是比較給力的,尤其是利用其描邊可以制作一些復(fù)制的邊框效果,這里我們就來看一下利用CSS3的線性漸變linear-gradient制作邊框的示例

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .line li{  border: none;   
  2.   background-image: -webkit-linear-gradient(#222 50%,transparent 50%);   
  3.   background-image: -moz-linear-gradient(#222 50%,transparent 50%);   
  4.   background-image: -o-linear-gradient(#222 50%,transparent 50%);   
  5.   background-image: linear-gradient(#222 50%,transparent 50%);   
  6.   background-size:  100% 1px;   
  7.   background-repeat: no-repeat;   
  8.   background-position: bottombottom;}  
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <ul class="line">  
  2.     <li>linear-gradient</li>  
  3.     <li>linear-gradient</li>  
  4.     <li>linear-gradient</li>  
  5. </ul>  

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

如 left描邊需要改變：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%);   
  2. background-size:  1px 100%;   
  3. background-position: left;  

具體的都不一一列出了。


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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>     
  2.      
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">     
  4. <head>     
  5.     <meta charset="utf-8" />     
  6.     <title></title>     
  7.     <style>     
  8.         .box {     
  9.             margin: 80px 30px;     
  10.             width: 200px;     
  11.             height: 200px;     
  12.             position: relative;     
  13.             background: #fff;     
  14.             float: left;     
  15.         }     
  16.      
  17.             .box:before {     
  18.                 content: '';     
  19.                 z-index: -1;     
  20.                 position: absolute;     
  21.                 width: 220px;     
  22.                 height: 220px;     
  23.                 top: -10px;     
  24.                 left: -10px;     
  25.             }     
  26.      
  27.         .first:before {     
  28.             background-image: linear-gradient(90deg, yellow, gold);     
  29.         }     
  30.      
  31.         .second:before {     
  32.             background-image: linear-gradient(0deg, orange, red);     
  33.         }     
  34.      
  35.         .third:before {     
  36.             background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);     
  37.         }     
  38.     </style>     
  39. </head>     
  40. <body>     
  41.     <div class="box first"></div>     
  42.     <div class="box second"></div>     
  43.     <div class="box third"></div>     
  44. </body>     
  45. </html>    

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

相關(guān)文章

最新評論