javascript - 避免边框颜色的背景颜色

Question

我有一个 div，背景颜色为 rgba(255,0,0,1)，边框颜色为 rgba(0,255,0,0.2)，边框半径为 10px。问题是边框颜色下面有背景颜色。这是我的代码:

div{
  background-color: rgba(255,0,0,1);
  border: 10px solid rgba(0,255,0,0.2);
  border-radius: 10px;
  width: 200px;
  height: 200px;
}
article{
  margin: 10px;
  margin-top: 20px;
  background-color: rgba(255,0,0,1);
  outline: 10px solid rgba(0,255,0,0.2);
  outline-radius: 10px;
  width: 200px;
  height: 200px;
}

<div></div>
<article></article>

我需要像轮廓一样的边框。遗憾的是，我不能改用 outline，因为它没有“outline-radius”属性，只有“-moz-outline-radius”，但它在 Chrome 上不起作用。

Answer 1

使用background-clip: content-box; 或background-clip: padding-box;

来自 MDN

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

---

div{
  background-color: rgba(255,0,0,1);
  border: 10px solid rgba(0,255,0,0.2);
  border-radius: 10px;
  width: 200px;
  height: 200px;
  background-clip: content-box;
}

<div></div>