CSS 边框颜色：rgba() 边框在角落处重叠，提供比预期更暗的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5722972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
border-color: rgba() borders overlap at the corners giving a darker color than intended
提问by Chris Sobolewski
Using the following code:
使用以下代码：
element{
width:300px;
border:9px solid;
border-color:rgb(0,0,0);
border-color:rgba(0,0,0, 0.7);
}
I end up with corners that are darker due to the overlay of the two borders... the only way I have found around this is to add a border-radiusequal to the width of the border. Are there any other work arounds?
由于两个边框的重叠，我最终得到了更暗的角落......我发现的唯一方法是添加一个border-radius等于边框宽度的值。还有其他解决方法吗？
I have only tested in chrome at the moment, I don't have my other browsers available right now.
我目前只在 chrome 中测试过，我现在没有其他浏览器可用。
回答by MLM
Use border-spacingon your table like so:
border-spacing像这样在你的桌子上使用：
table
{
border-collapse: separate;
border-spacing: 0;
}
Combine with some nice CSS selectors to keep borders from overlapping (see below). This will apply to all tds except the last one.
结合一些不错的 CSS 选择器来防止边框重叠（见下文）。这将适用于除最后一个之外的所有 td。
table td:not(:last-child)
{
}
See Demo on jsFiddle
参见jsFiddle 上的演示
Then you can use rgba borders without overlap.
然后您可以使用不重叠的 rgba 边框。
回答by rgtk
Since most browsers supportbox-shadow, you can use it like that:
由于大多数浏览器都支持box-shadow，你可以这样使用它：
box-shadow: 0 0 0 9px rgba(0, 0, 0, 0.7);
回答by Blender
It's not very elegant, but you could make a wrapping <div>with a solid border and an opacity value: http://jsfiddle.net/4gutj/24/
它不是很优雅，但您可以<div>使用实心边框和不透明度值进行包装：http: //jsfiddle.net/4gutj/24/
HTML:
HTML：
<div class="opacity-wrapper">
<div class="transparent-border">Foo</div>
</div>
CSS:
CSS：
.transparent-border {
width:300px;
font-size: 40px;
padding: 10px;
text-align: center;
border:30px solid;
border-color:rgb(0,0,0);
border-color:rgba(0,0,0, 0.7);
margin-bottom: 10px;
}
.opacity-wrapper {
background-color: rgb(0, 0, 0);
opacity: 0.7;
padding: 30px;
width:320px;
}
.opacity-wrapper div {
padding: 10px;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
font-size: 40px;
text-align: center;
}
回答by Greg K
Also not very elegant but works is:
也不是很优雅，但有效的是：
element{
width:300px;
border:9px solid;
border-top-color: rgba(0,0,0, 0.7);
border-bottom-color: rgba(0,0,0 0.7);
border-right-color: rgba(1,1,1, 0.7);
border-left-color: rgba(1,1,1 0.7);
}
The color differences cause the colors to meet at a 45% angle. You can also create bevels like this.
颜色差异导致颜色以 45% 的角度相遇。您也可以创建这样的斜角。
