本篇內(nèi)容介紹了“CSS3中background clip背景裁切屬性是什么”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的白城網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

clip，英文意為“裁切，修剪”，所以很顯然，background-clip屬性肯定與背景裁切有關(guān)，而事實也正是如此。background-clip存在以下四個屬性值，他們分別是：border-box、padding-box、content-box和text。

background-clip屬性值：

值 說明

border-box 默認值。背景繪制在邊框方框內(nèi)（剪切成邊框方框）

padding-box 背景繪制在襯距方框內(nèi)（剪切成襯距方框）

content-box 背景繪制在內(nèi)容方框內(nèi)（剪切成內(nèi)容方框）

text 給文本填充圖片背景

background-clip瀏覽器支持

IE9+、Firefox、Opera、Chrome以及Safari支持background-clip屬性。注釋：InternetExplorer8以及更早的版本不支持background-clip屬性。

background-clip屬性講解

接下來我將通過具體實例來對background-clip這幾個屬性值一一進行講解。

border-box

.box{background-clip:border-box;}

border，意味著將邊框以外的背景部分裁掉，所以最終效果與圖一相同，也就是說，border-box是background-clip的默認屬性值。

padding-box

.box{background-clip:padding-box;}

padding，意味著將內(nèi)邊距以外的背景部分裁掉

content-box

.box{background-clip:content-box;}

content，意味著將內(nèi)容以外的背景部分裁掉

text

.box{-webkit-text-fill-color:transparent;background:-webkit-linear-gradient(right,#0f0,#00f);-webkit-background-clip:text;}

text，意味著將文字輪廓以外的背景部分裁掉而只留下文字輪廓以內(nèi)的部分，而此時我們只需要通過設(shè)置文字為透明色即可透過文字看到盒子背景色

background-clip:text，目前需要加上webkit前綴。

“CSS3中background clip背景裁切屬性是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

網(wǎng)站標題：CSS3中backgroundclip背景裁切屬性是什么-創(chuàng)新互聯(lián)
鏈接URL：http://weahome.cn/article/cshjpd.html