如何使用CSS中的border-image實作border漸變色效果

​

border-image屬性

border-image屬性是一個是一個簡寫屬性，通過此屬性可使用圖檔來建立邊框，該屬性的使用文法是：

border-image: source slice width outset repeat|initial|inherit;      

參數：

border-image-source：用于指定要用于繪制邊框的圖像的位置。

border-image-slice：圖像邊界向内偏移。

border-image-width：圖像邊界的寬度。

border-image-outset：用于指定在邊框外部繪制 border-image-area 的量。

border-image-repeat：用于設定圖像邊界是否應重複（repeat）、拉伸（stretch）或鋪滿（round）。

下面主要介紹通過border-image來實作漸變色邊框。

通過border-image實作border漸變色

代碼：

<div class="content"></div>
<style>
.content { 
    width: 200px;
    height: 200px;
    border:20px solid #ddd;
    border-image: -webkit-linear-gradient(red,yellow) 30 30;
    border-image: -moz-linear-gradient(red,yellow) 30 30;
    border-image: linear-gradient(red,yellow) 30 30; 
}
</style>      

效果如下：

但是border-image無法實作圓角，是以換一個思路：通過padding來實作，給父節點設定漸變背景，通過padding模拟邊框（此處的padding值就是border需要的值），注意父元素和子元素的border-radius屬性值保持一緻。

<div class="content">
  <div class="box"></div>
</div>
<style>
.content { 
    width: 200px; 
    height: 200px; 
    box-sizing: border-box; 
    padding: 20px; 
    border-radius: 50%; 
    background-image: -webkit-linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%);  
    background-image: -moz-linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%); 
    background-image: linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%);  
}
.box { 
    width:100%; 
    height:100%; 
    border-radius:50%; 
    background:#fff; 
}
</style>      

效果如下：

總結

今天分享的這個CSS技能，是我們在實際開發中，經常會遇到的一個效果，如果你覺得有用的話，請記得點贊我，關注我，并且分享給你身邊正在學習這方面知識技能的朋友，也許能夠幫助到他。

最後，感謝你的閱讀，祝生活愉快！

學習更多技能

請點選下方公衆号

​