是否可以使div背景具有不透明性，但某些像素边界具有渐变？

Question

I have a div with 0.5 transparency. This acts as a darkening rectangle over a bigger background slider image (an outer div) to make the text more readable over the slider background picture.

<div class="darken-rectangle">
   <!-- inner text container divs go here -->
</div>

CSS:

.darken-rectangle {
   padding: 30px 30px 30px 30px;
   background-color: rgba(0, 0, 0, 0.5);
}

This works great, however I would like to a few pixel (3px-6px) gradient border for the rectangle which drives the alpha from the outer light to the inner darken.

Unfortunately I can not find how to do this, even does not know is it possible with pure CSS, or do I have to create 4 png images for the 4 "border and arrange the layout?

Answer 1

I think what you want is box-shadow , see jsFiddle

HTML

<div class="darken-rectangle">
    Test Text
</div>

CSS

.darken-rectangle {
    /* ... */
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 1);
}

Answer 2

.darken-rectangle {
   padding: 30px 30px 30px 30px;
   background-color: rgba(0, 0, 0, 0.5);
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
   border-radius: 3px;
}