使用以下代码:
element{
width:300px;
border:9px solid;
border-color:rgb(0,0,0);
border-color:rgba(0,0,0, 0.7);
}
由于两个边界的叠加,我最终得到了更暗的角…我找到的唯一方法是添加一个等于边界宽度的border-radius
。还有别的办法吗?
目前我只在chrome中进行了测试,我没有其他可用的浏览器。
在您的表上使用border-spacing
:
table
{
border-collapse: separate;
border-spacing: 0;
}
结合一些漂亮的CSS选择器来防止边框重叠(见下文)。这将适用于除最后一个以外的所有tds。
table td:not(:last-child)
{
}
参见jsFiddle
演示这不是很优雅,但你可以用一个实心边框和不透明度值来包装<div>
: http://jsfiddle.net/4gutj/24/
<div class="opacity-wrapper">
<div class="transparent-border">Foo</div>
</div>
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;
}
也不是很优雅,但作品是:
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);
}
色差导致颜色以45%的角度相交。你也可以像这样创建斜面
由于大多数浏览器都支持box-shadow,所以您可以这样使用它:
box-shadow: 0 0 0 9px rgba(0, 0, 0, 0.7);