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

Question

I'm trying to make the sidebar for my theme match the main content, in that there's a solid background with a transparent border. I can make them work individually, but when I try to do both it doesn't work right. Here's the snipet of code that's been causing the problem:

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

I am aware that the border code is noted out, and that's because the border code and the background color code work fine individually, but when I have both at the same time, I get this .

Does anyone know how I can fix this? I just want to have a semi-transparent background under a solid one to make a nice border effect.

Answer 1

You can use a box-shadow instead of a border.

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

Since the border is rendered on top of the background of the div, they are stacking and not giving you what you want. You could wrap another div around it, and use that as your border:

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