css3的background-clip 背景

最新推荐文章于 2025-12-13 21:16:15 发布

原创最新推荐文章于 2025-12-13 21:16:15 发布 · 558 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #backg-clip #border-box #content-box #padding-box

本文展示了CSS背景裁剪属性（background-clip）在不同盒模型（content-box, padding-box, border-box）下的效果，包括内容盒、内边距盒和边框盒，并通过实例进行说明。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.c-box{
    width:100px;
    height:100px;
    padding:20px;
    background-color:#0FF;
    background-clip: content-box;
    border:2px solid #92b901;
}
.p-box{
    width:100px;
    height:100px;
    padding:10px;
    background-color:#0F0;
    background-clip: padding-box;
    border:10px dashed #92b901;
}
.b-box{
    width:100px;
    height:100px;
    padding:10px;
    background-color:#FF0;
    background-clip: border-box;
    border:5px dashed #92b901;
}
</style>
<title>无标题文档</title>

</head>

<body>

<div class="c-box">
     content-box 的效果
</div>
<br />
<div class="p-box">
     padding-box 的效果
</div>
<br />
<div class="b-box">
    border-box 的效果
</div>
</body>
</html>