1

使用以下代码：

element{
    width:300px;
    border:9px solid;
    border-color:rgb(0,0,0);
    border-color:rgba(0,0,0, 0.7);
}

由于两个边框的叠加，我最终得到了更暗的角落......我发现的唯一方法是添加一个border-radius等于边框宽度的方法。还有其他解决方法吗？

我目前只在 chrome 中进行了测试，我现在没有其他浏览器可用。

4

4 回答 4

3

border-spacing像这样在你的桌子上使用：

table
{
    border-collapse: separate;
    border-spacing: 0;
}

结合一些不错的 CSS 选择器来防止边框重叠（见下文）。这将适用于除最后一个之外的所有 td。

table td:not(:last-child)
{

}

请参阅jsFiddle 上的演示

然后你可以使用没有重叠的 rgba 边框。

于 2013-08-16T04:28:55.960 回答
2

由于大多数浏览器都支持box-shadow，你可以这样使用它：

box-shadow: 0 0 0 9px rgba(0, 0, 0, 0.7);
于 2014-02-01T14:55:48.000 回答
2

也不是很优雅，但有效的是：

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% 的角度相遇。你也可以像这样创建斜面。

于 2011-09-01T21:45:02.380 回答
2

它不是很优雅，但是您可以<div>使用实心边框和不透明度值进行包装：http: //jsfiddle.net/4gutj/24/

HTML：

<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;
}
于 2011-04-19T21:49:40.173 回答