Question

我有一个div，背景颜色为rgba（255,0,0,1），边框颜色为rgba（0,255,0,0.2），边长为10px。问题是边框颜色在其下面有背景颜色。这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

我需要一个像轮廓一样的边框。可悲的是，我不能使用轮廓，因为它没有＆＃34; outline-radius＆＃34; property，only＆＃34; -moz-outline-radius＆＃34;，但它不适用于Chrome。

Answer 1

如果我理解正确，您可以使用位于边界外的box-shadow：

div {
  background-color: rgba(255, 0, 0, 1);
  box-shadow: 0 0 0 10px rgba(255, 0, 0, 0.5);
  border-radius: 10px;
  width: 200px;
  height: 200px;
  /*extra styling*/
  margin: 50px;
}

/*Just for demo so you can see the transparency*/
body {
  background: #fff url(http://www.destination360.com/north-america/canada/images/s/canada-cn-tower.jpg) repeat;
}

<div>Red half-opacity box-shadow</div>

Answer 2

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

来自MDN

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

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 3

您需要的是background-clip属性：

＆＃13;

div {
  background-clip: padding-box;
  background-color: rgba(255,0,0,1);
  border: 10px solid rgba(0,255,0,0.2);
  border-radius: 10px;
  width: 200px;
  height: 200px;
}
article {
  background-clip: padding-box;
  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;
}

＆＃13;

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

＆＃13;

Answer 4

尝试使用两个div。

div.outer {
  border: 10px solid rgba(0, 255, 0, 0.2);
  border-radius: 10px;
  width: 200px;
  height: 200px;
}
div.inner {
  background-color: rgba(255, 0, 0, 1);
  height: 100%;
  width: 100%;
}

<div class="outer">
  <div class="inner"></div>
</div>

避免边框颜色的背景颜色

4 个答案: