background-clip属性(CSS设置背景的绘制区域)
background-clip属性
CSSbackground-clip属性
作用:规定背景的绘制区域。
语法:
background-clip:border-box|padding-box|content-box;
属性值:
●border-box:背景被裁剪到边框盒,即边框以内的区域。
●padding-box:背景被裁剪到内边距框,即padding以内区域。
●content-box:背景被裁剪到内容框,即内容以内的区域。
注: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>
CSS设置背景的绘制区域
index.html
<styletype="text/css">
div{
width:20%;
height:100px;
margin:15px;
background:#CF0;
border:10pxdotted#000;/*点线*/
float:left;
}
div:nth-of-type(1){
padding:35px;/*内边距*/
}
div:nth-of-type(2){
padding:35px;
background-clip:padding-box;/**/
}
div:nth-of-type(3){
padding:35px;
background-clip:content-box;
}
</style>
</head>
<body>
<div>
<h3>没有背景剪裁(默认值:border-box)<p/>CSS3中background-clip背景剪裁属性是从指定位置开始绘制。</h3>
</div>
<div>
<h3>padding-box<p/>CSS3中background-clip背景剪裁属性是从指定位置开始绘制。</h3>
</div>
<div>
<h3>content-box<p/>CSS3中background-clip背景剪裁属性是从指定位置开始绘制。</h3>
————————————————
版权声明:本文为CSDN博主「凌冰_」的原创文章,遵循CC4.0BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/hlx20080808/article/details/69568879
?
优秀作品:
最新作品:
评论列表(共5人参与)参与讨论或分享设计作品获得视觉癖积分奖励
叛逆是我的注册会员
2021-06-10 23:59:24
结束只播放一次。 2、如果取值为infinite,动画将会无限次的播放。 举例: i作为html中的标签是用来做什么的,接下来我们就一起来研讨html中标签吧!
回复时候, 注册会员
2021-06-10 20:41:40
美柔美。字体游客
2021-06-10 10:10:36
游客38202:background-clip属> 美国工业规划协会IDSA(IndustrialDesignersSocietyofAmerica):工业规划是一项专门的服务性作业,为运用者和生产者双方的利益而对产品和产品系列的外形、功能v> 最终,也由于标签是HTML5中新添加的标签,所以在IE8以及更早版别的IE浏览器中是不支持标签的。不过都已经2020年了信任也没有谁还会去用那么老
回复是改日的注册会员
2021-06-10 3:15:0
框盒,即边框以内的区域。 ●padding-box:背景被裁剪到内 wrap:当提交表单时,文本区域中的文本应该怎样换行(值:hard、soft)。 标签支撑html大局特点和html事件
回复