可以将背景颜色应用于未应用于边框的元素？ （CSS）

Question

在CSS3中，是否可以将背景颜色应用于 不 应用于边框的元素？

使用时：

element { background: red; }

背景颜色也会应用到边框区域。

Answer 1

是

使用background-clip - MDN Link

  

background-clip CSS属性指定元素的背景（颜色或图像）是否在其边框下方延伸。

     

  
• 边界框
  

     

背景延伸到边框的外边缘（但在z顺序中位于边框下方）。

     

  
• 填充盒
  

     

边框下方没有绘制背景（背景延伸到填充的外边缘）。

     

  
• 内容框
  

     

背景画在内容框内（剪裁）。

＆＃13;

＆＃13;

p {
  border: 10px navy;
  border-style: dotted double;
  margin: 1em;
  padding: 1em;
  background: #F8D575;
}
.border-box {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}

＆＃13;

<p class="border-box">The yellow background extends behind the border.</p>
<p class="padding-box">The yellow background extends to the inside edge of the border.</p>
<p class="content-box">The yellow background extends only to the edge of the content box.</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需使用：

element { background: red; border-color:black; }