可以将背景颜色应用于未应用于边框的元素吗？ (CSS)

Question

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

当您使用时：

element { background: red; }

背景色也应用于边框区域。

Answer 1

是

使用 background-clip - MDN Link

The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

• border-box

The background extends to the outside edge of the border (but underneath the border in z-ordering).

• padding-box

No background is drawn below the border (background extends to the outside edge of the padding).

• content-box

The background is painted within (clipped to) the content box.

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;
}

<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>

Answer 2

只需使用：

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