关于javascript：避免背景颜色与边框颜色发生冲突

Avoid background color from border color

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

1	</article>

我需要一个像轮廓一样的边框。
遗憾的是，我不能使用大纲，因为它没有"轮廓半径"属性，只有" -moz-轮廓半径"，但在Chrome上不起作用。

相关讨论

使用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.

1
2
3
4
5
6
7
8

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

1	Red half-opacity box-shadow

相关讨论

您需要的是background-clip属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

1	</article>

相关讨论

尝试使用两个格

1
2
3
4
5
6
7
8
9
10
11

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

相关讨论