背景颜色绘制区域——background-clip
属性background-clip: border-box; 背景被裁剪到边框区域,在内容区、内填充区、边框区域显示,默认值
-
background-clip: padding-box; 背景被裁剪到内填充区域,在内容区、内填充区显示
-
background-clip: content-box; 背景被裁剪到内容区域,仅在内容区域显示
.wrap div { width: 200px; height: 200px; background: plum; padding: 30px; margin: 30px; border: 20px dotted black; } /* 背景被裁剪到内容区域,仅在内容区域显示 */ .wrap div:nth-child(1) { /* content-box */ background-clip: content-box; } /* 背景被裁剪到内填充区域,在内容区、内填充区显示 */ .wrap div:nth-child(2) { /* padding-box */ background-clip: padding-box; } /* 背景被裁剪到边框区域,在内容区、内填充区、边框区域显示,默认值 */ .wrap div:nth-child(3) { /* border-box */ background-clip: border-box; }