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

想要實(shí)現(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;?/*從邊框開(kāi)始背景圖*/
?background-clip:padding-box,border-box;?/*設(shè)置第一個(gè)背景和第二個(gè)背景的范圍*/
?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)邊框到邊框，背景圖像單獨(dú)設(shè)置不重復(fù)。</span>
</div>

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

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

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

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

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表示的是背景尺寸，其五個(gè)值如下，依次是

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