Question

我试图让主题的侧边栏与主要内容相匹配，因为这里有一个带有透明边框的纯色背景。我可以让它们单独工作，但是当我尝试这两种方法时，它都无法正常工作。以下是造成问题的代码片段：

#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 。

有谁知道如何解决这个问题？我只是希望在一个坚固的背景下有一个半透明的背景来产生漂亮的边框效果。

Answer 1

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

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

Answer 2

由于边框呈现在div的背景之上，因此它们是堆叠的，而不是为您提供所需的内容。您可以在其周围包裹另一个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; 
}

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

2 个答案: