Rumah > Artikel > hujung hadapan web > CSS3中的background-clip属性怎么用
CSS3中的background-clip属性怎么用
- 青灯夜游asal
- 2019-02-19 17:10:193693semak imbas
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>效果图：
以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！
Atas ialah kandungan terperinci CSS3中的background-clip属性怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：background-repeat属性怎么用Artikel seterusnya：CSS如何使用!important规则？(代码示例)