您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關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進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。