• <nav id="i44m4"></nav>
  • <kbd id="i44m4"></kbd>
    經典案例推廣高端H5電商設計公司聯系報價
    QQ聯系
    微信聯系
    手機聯系
    QQ聯系
    微信聯系
    手機聯系

    CSS之圓角邊框漸變的實現

    發布時間:2019-08-07
    發布者:eidea
    瀏覽次數:4485
    注:測試瀏覽器版本號——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項目官網

    老板把我摁倒在办公桌啪啪_人禽杂交在线播放网站_我原来是富二代_女人和男人啪视频在线观看_又黄又刺激超爽动态图_色偷偷2019免费视频观看