CSS3中background clip背景裁切屬性是什么

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

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

　　background-clip屬性值：

　　值 說明

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

　　padding-box 背景繪制在襯距方框內（剪切成襯距方框）

　　content-box 背景繪制在內容方框內（剪切成內容方框）

　　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，意味著將內邊距以外的背景部分裁掉

　　content-box

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

　　content，意味著將內容以外的背景部分裁掉

　　text

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

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

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

“CSS3中background clip背景裁切屬性是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！