首頁  >  文章  >  web前端  >  利用CSS3的線性漸變linear-gradient製作邊框的範例程式碼分享

利用CSS3的線性漸變linear-gradient製作邊框的範例程式碼分享

高洛峰
高洛峰原創
2017-03-09 17:16:541794瀏覽

linear-gradient線條用來製作邊框還是比較給力的,尤其是利用其描邊可以製作一些複製的邊框效果,這裡我們就來看看利用CSS3的線性漸變linear-gradient製作邊框的示例代碼分享

一般的app邊框描邊的線都小於一像素,那麼我就像往常一樣直接描了1px的邊框,雖然是1px可是結果和app裡的描邊完全不一樣“粗了” ,所以就上網找了一下看看有沒有解決方法,可是找了一會沒找到,那咋辦,需求方不願意不要這麼粗,那就只能自己解決了。
所以用上個方法聯想到了線性漸變(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,又出來了,但還是有點瑕疵,那麼問題來了,就是改變描邊位置(left,top,right,bottom)需要修改參數

如left描邊需要改變:

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

具體的都不一一列出了。


利用linear製作複雜的邊框效果
另外,在網路上看到利用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: &#39;&#39;;     
                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方法實現絢麗邊框的程式碼和解釋,大家可以在本地進行實現,以此發現更多新奇的組合實現方法。

以上是利用CSS3的線性漸變linear-gradient製作邊框的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn