在時使用CSS邊框圓角是很容易的事，但要設(shè)置邊框圓角的漸變效果就需要費些功夫了，需要正確理解幾個CSS屬性的含義，background-origin,background-clip,background-size這幾個是必須用到的，調(diào)整好性能的數(shù)值就可以靈活運(yùn)用了。

想要實現(xiàn)CSS圓角漸變并匹配內(nèi)容背景圖可以參考以下代碼：

<style>
div {
 width: 500px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border-radius: 50px; /*設(shè)置圓角*/
 border:50px solid transparent; /*設(shè)置邊框顏色透明，確保背景漸變色顯示*/
 background-origin:border-box; /*從邊框開始背景圖*/
 background-clip:padding-box,border-box; /*設(shè)置第一個背景和第二個背景的范圍*/
 background-size:cover;
 /*由于背景圖像不能設(shè)置純色，所以可以使用下面的方式設(shè)置純色*/
 background-image:linear-gradient(#fff, #fff),linear-gradient(#FC0, #F30); 
}
.a1{display:block;height:280px;background-image:url(/images/school.jpg);
background-repeat:no-repeat;background-size:contain;}
</style>

<div>
<span class="a1">邊框漸變色從內(nèi)邊框到邊框，背景圖像單獨設(shè)置不重復(fù)。</span>
</div>

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

border-box 從邊框開始；
padding-box(默認(rèn)) 從內(nèi)邊距開始；
content-box 從內(nèi)容開始。

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

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

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

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

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

contain 將圖像擴(kuò)大至適應(yīng)最短的邊，剩余部分默認(rèn)重復(fù)圖像
cover 將圖像擴(kuò)大至適應(yīng)最長的邊，圖像可能顯示不完整
length 兩個值依次設(shè)置圖像寬和高，未設(shè)置則為auto
percentage 兩個百分比依次設(shè)置圖像寬和高，未設(shè)置則為auto
auto 默認(rèn)設(shè)置