<pre id="bxbrr"></pre>

      <span id="bxbrr"></span>
      <span id="bxbrr"></span>

      <span id="bxbrr"></span>

        經典案例推廣高端H5電商設計公司聯系報價
        QQ聯系
        微信聯系
        手機聯系
        QQ聯系
        微信聯系
        手機聯系

        CSS之圓角邊框漸變的實現

        發布時間:2019-08-07
        發布者:eidea
        瀏覽次數:9683
        注:測試瀏覽器版本號——chrome 75.0.3770.80;opera 60.0.3255.109;firefox 67.0;ie 11。
        對于普通的邊框漸變,其作用于圓角邊框漸變時會覆蓋掉圓角的效果,這不是我們預期的,所以我們需要尋找其他的方法解決這個需求。


        當盒子同時設置圓角(radius)和漸變時,圓角失效,因此不能用這種方式來實現圓角邊框顏色漸變。但我們可以使用下面三個方法實現

        1 使用背景重疊

        在此之前我們先來看看三個跟背景有關的屬性background-origin,background-clip,background-size。

        background-origin表示的是背景起始位置,其三個值如下,依次是

        border-box 從邊框開始;
        padding-box(默認) 從內邊距開始;
        content-box 從內容開始。

        background-origin: border-box | padding-box(默認) | content-box


        background-clip表示的是背景填充位置,其四個值如下,依次是

        border-box(默認) 填充至邊框;
        padding-box 填充至內邊距;
        content-box 填充之內容;
        text 作為字體前景色。

        background-clip: border-box(默認) | padding-box | content-box | text


        background-size表示的是背景尺寸,其五個值如下,依次是

        contain 將圖像擴大至適應最短的邊,剩余部分默認重復圖像
        cover 將圖像擴大至適應最長的邊,圖像可能顯示不完整
        length 兩個值依次設置圖像寬和高,未設置則為auto
        percentage 兩個百分比依次設置圖像寬和高,未設置則為auto
        auto 默認設置

        background-size: contain | cover | <length> | <percentage> | auto(默認)


        以下面代碼為例

        div {
         width: 900px;
         height: 300px;
         margin: 10px;
         padding: 30px;
         border:50px solid transparent;
         background-origin:border-box;
         background-clip: content-box,padding-box, border-box;
         background-size: contain,50px 50px,cover;
         background-image:url("css.jpg"),linear-gradient(yellow, green),url("css.jpg");
        }

        效果如圖


        由上面的例子我們可以看出:

        1、background-image可以多次添加圖片或者漸變,需要用","隔開按照添加順序依次由上往下層疊,簡單來講就是誰先聲明,誰層級高。
        2、background-origin,background-clip,background-size同樣可以設置多個值,用","隔開,每個值對應的是background-image的值。

        有了上述的知識,我們現在可以實現我們的需求了,其主要原理是利用背景重疊,第一個背景設置范圍為padding和content,第二個背景設置范圍為border,padding和content,那么第二個背景只有border顯示,其中padding和content被第一個背景覆蓋。

        話不多說,上代碼
        div {
         width: 900px;
         height: 300px;
         margin: 10px;
         padding: 30px;
         border-radius: 50px; /*設置圓角*/
         border:50px solid transparent; /*設置邊框顏色透明,確保背景漸變色顯示*/
         background-origin:border-box; /*從邊框開始背景圖*/
         background-clip: padding-box, border-box; /*設置第一個背景和第二個背景的范圍*/
         background-size: cover;
         /*由于背景圖像不能設置純色,所以可以使用下面的方式設置純色*/
         background-image:linear-gradient(#fff, #fff),linear-gradient(yellow, green); 
        }

        效果如圖



        2 使用偽元素

        讓我們先來看代碼

        div {
         width: 900px;
         height: 300px;
         margin: 10px;
         padding: 30px;
         border-radius: 50px; /*設置圓角*/
         border:50px solid transparent; /*設置邊框顏色透明,確保背景漸變色顯示*/
         background-clip: padding-box; /*確保此北京范圍為內邊距內*/
         background: #fff;
        }
        div::after {
         position: absolute;
         /*以div的content為基準往外擴border的寬度*/
         top: -50px; 
         bottom: -50px; 
         left: -50px;
         right: -50px;
         border-radius: 50px;
         /*設置偽元素背景漸變色*/
         background-image: linear-gradient(yellow, green);
         content: '';
         /*利用層疊將div部分背景置頂*/
         z-index: -1; 
        }

        效果如下圖,與方法1中效果相同



        3 使用遮罩


        使用遮罩,顧名思義就是在div外面加一層div,其大小正好比里面的div大border的寬度,通過外面div的背景漸變來模擬圓角邊框漸變。

        具體代碼如下:

        /*內部div樣式*/
        .inside {
         width: 960px;
         height: 360px;
         margin: 10px;
         padding: 0px;
         border-radius: 50px; /*設置圓角*/
         border:50px solid transparent; /*設置邊框顏色透明,確保背景漸變色顯示*/
         background-origin:border-box; /*從邊框開始背景圖*/
         background-image: linear-gradient(yellow, green);
        }
        /*外部div樣式*/
        .outside {
         background: #fff;
         width: calc(100% - 60px);
         height: calc(100% - 60px);
         padding: 30px;
        }

        效果如下圖,與方法1中效果相同


        注意

        在實驗過程中有以下幾點需要注意:

        1、屬性background-origin,background-clip,background-size針對于background-image生效,如果使用background進行漸變色的設置可能會出現不符預期的效果。
        2、邊框外側有圓角而內部無圓角是因為邊框寬度設置比較大,圓角又設置的比較小。有興趣的可以自己實驗一下

        網站案例欣賞

        合眾生物股份

        響應式企業網站

        匯金國際城

        FLASH項目官網

        中保小額貸款

        響應式官網

        看一 级 黄 色 片,靠免费视频观看,靠免费视频在线观看