在CSS中的半透明边框 - Tumblr主题编码

我试图让我的主题匹配的侧边栏主要内容，在那里有一个透明边框的坚实背景。我可以让他们单独工作，但是当我尝试做这两件事情时，这并不正确。下面是一个已经导致该问题的代码snipet：在CSS中的半透明边框 - Tumblr主题编码

#sidebar { 
    width: 300px; 
    background-color: #A3A3CC; 
    /*border-style: solid; border-width: 15px; border-color: rgba(255, 255, 255, 0.4);*/ 
    position: fixed; 
    left: 60px; 
    top: 90px; 
    height: 490px; 
    margin-left: 30px; 
    }

我知道边界代码注意到了，那是因为边界代码和单独背景颜色的代码工作正常，但当我都在同时，我得到this。

有谁知道我该如何解决这个问题？我只是想在一个坚实的背景下制作一个半透明的背景来制作一个不错的边框效果。

来源

2014-07-08 user3329940

您可以使用箱形阴影而不是边框。

JSfiddle Demo

CSS

#sidebar { 
    width: 300px; 
    background-color: #A3A3CC; 
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.4); 
    position: fixed; 
    left: 60px; 
    top: 90px; 
    height: 490px; 
    margin-left: 30px; 
}

来源

2014-07-08 16:02:36

，完美的工作，非常感谢你。你会碰巧知道如何把第三个盒子放在灰色的顶部吗？ – user3329940

您可以有多个阴影框，但它取决于您的实际设计。箱形阴影将始终位于任何边框的外部 - http://jsfiddle.net/8ZjtY/2/ –

再次感谢您的帮助！ – user3329940

由于边界的格，它们堆叠，而不是让你想要的东西的背景上呈现。你可以换另一个DIV周围，并用它作为边框：

JSFiddle

HTML

<div id="outer"><div id="sidebar"> </div></div>

CSS

#sidebar { 
    background-color: #A3A3CC; 
    width: 300px; 
    height: 490px; 
} 
#outer{ 
    padding:15px; 
    background: rgba(255, 255, 255, 0.4); 
    position: fixed; 
    left: 60px; 
    top: 90px; 
}

来源

2014-07-08 16:06:58 matt

在CSS中的半透明边框 - Tumblr主题编码

回答

相关问题