1. border-box: 背景绘制在边框框盒之下,延伸到外边距框。
background-clip: border-box;
2. padding-box: 背景绘制在边框框盒之下,延伸到内边距框。
background-clip: padding-box;
3. content-box: 背景仅在内容框内绘制,不包括内边距和边框。
background-clip: content-box;
这些值决定了背景绘制的区域,可以用来创建一些有趣的效果。例如:
.element {
background: #3498db;
padding: 20px;
border: 5px solid #e74c3c;
background-clip: content-box; /* 背景仅在内容框内绘制 */
}
在这个例子中,元素有一个蓝色的背景,内边距为20px,边框为红色。由于设置了 background-clip: content-box;,背景仅在内容框内绘制,不延伸到内边距和边框,因此在内边距和边框的区域没有背景显示,呈现出一个有趣的效果。
转载请注明出处:http://www.pingtaimeng.com/article/detail/5993/CSS