避免边框颜色的背景颜色 [英] Avoid background color from border color

问题描述

我有一个背景颜色为rgba（255,0,0,1）的div，边框颜色为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;宽度：200px; height：200px;} article {margin：10px; margin-top：20px; background-color：rgba（255,0,0,1）;大纲：10px solid rgba（0,255,0,0.2）; outline-radius：10px;宽度：200px;

像大纲那样的边框。
令人伤心的是，我不能使用轮廓，因为它没有轮廓半径属性，只有-moz-outline-radius，但它不适用于Chrome。

解决方案

如果我理解正确，可以使用 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;宽度：200px; height：200px; / *额外样式* / margin：50px;} / *仅用于演示，以便您可以看到透明度* / body {background：#fff url（http://www.destination360.com/north-america/canada/images/ s / canada-cn-tower.jpg）repeat;}  

< div>红色半透明框阴影< / div>

I have a div with a background color of rgba(255,0,0,1), and a border color of rgba(0,255,0,0.2), and a 10px border-radius. The problem is that the border color have the background color under it. This is my code:

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>

I need a border like at the outline. Saddly I can't use outline instead because it doesn't have "outline-radius" property, only "-moz-outline-radius", but it doesn't work on Chrome.

解决方案

If I understand correctly, you can use box-shadow, which sits outside the border:

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>

这篇关于避免边框颜色的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！