這篇文章將為大家詳細講解有關CSS3中background-clip屬性的用法，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
background-clip屬性用于指定元素背景所在的區域,可以指定：邊框以內的區域、padding以內區域、內容以內的區域。
CSS background-clip屬性
作用：規定背景的繪制區域。
語法：
background-clip: border-box|padding-box|content-box;
屬性值：
● border-box：背景被裁剪到邊框盒，即邊框以內的區域。
● padding-box：背景被裁剪到內邊距框，即padding以內區域。
● content-box：背景被裁剪到內容框，即內容以內的區域。
注：Internet Explorer 8 以及更早的版本不支持 background-clip 屬性。
CSS background-clip屬性的使用示例
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:300px;
padding:50px;
background-color:yellow;
background-clip:content-box;
border:2px solid #92b901;
}
</style>
</head>
<body>
<div>
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
</div>
</body>
</html>效果圖：
關于CSS3中background-clip屬性的用法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
