CSS3中background-clip屬性怎么用

發(fā)布時間：2022-02-25 13:36:00 來源：億速云閱讀：141 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關CSS3中background-clip屬性怎么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

　　CSSbackground-clip屬性

　　作用：規(guī)定背景的繪制區(qū)域。

　　語法：

　　background-clip:border-box|padding-box|content-box;

　　屬性值：

　　●border-box：背景被裁剪到邊框盒，即邊框以內(nèi)的區(qū)域。

　　●padding-box：背景被裁剪到內(nèi)邊距框，即padding以內(nèi)區(qū)域。

　　●content-box：背景被裁剪到內(nèi)容框，即內(nèi)容以內(nèi)的區(qū)域。

　　注：InternetExplorer8以及更早的版本不支持background-clip屬性。

　　CSSbackground-clip屬性的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<style>

　　div

　　{

　　width:300px;

　　height:300px;

　　padding:50px;

　　background-color:yellow;

　　background-clip:content-box;

　　border:2pxsolid#92b901;

　　}

　　</style>

　　</head>

　　<body>

　　<div>

　　這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。

　　</div>

　　</body>

　　</html>

CSS3中background-clip屬性怎么用

感謝各位的閱讀！關于“CSS3中background-clip屬性怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

猜你喜歡