首页 >web前端 >css教程 >CSS3中的background-clip属性怎么用

CSS3中的background-clip属性怎么用

青灯夜游
青灯夜游原创
2019-02-19 17:10:193784浏览

CSS3中的background-clip属性的用法:【background-clip:border-box|padding-box|content-box】。background-clip属性用于规定背景的绘制区域。

CSS3中的background-clip属性怎么用

CSS background-clip属性

作用:规定背景的绘制区域。

(推荐教程:CSS教程

语法:

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>

效果图:

2.jpg

以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目!!!

以上是CSS3中的background-clip属性怎么用的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn