CSS3中的background-clip属性怎么用
程序员文章站
2022-03-18 20:29:51
...
CSS3中的background-clip属性的用法：【background-clip:border-box|padding-box|content-box】。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>
效果图：
以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注相关教程栏目！！！
以上就是CSS3中的background-clip属性怎么用的详细内容，更多请关注其它相关文章！
推荐阅读
-
java中hashCode和equals什么关系，hashCode到底怎么用的
-
怎么用万兴神剪手对视频中的某一片段进行加速
-
CSS3 Flexbox中flex-shrink属性的用法示例介绍
-
简单掌握CSS3中resize属性的用法
-
浅析CSS3中鲜为人知的属性：-webkit-tap-highlight-color
-
CSS3中background-clip和background-origin的区别示例介绍
-
CSS3中几个新增加的盒模型属性使用教程
-
在css3中background-clip属性与background-origin属性的用法介绍
-
CSS3线性渐变简单实现以及该属性在浏览器中的不同
-
ai矩形网格工具怎么用? AI中矩形网格工具的实例教程