是否可以让 div 背景不透明但渐变一些像素边框？答案

【问题标题】：Is it possible to have div background with opacity but with gradient some pixel borders?是否可以让 div 背景不透明但渐变一些像素边框？
【发布时间】：2015-11-24 14:08:49
【问题描述】：

我有一个透明度为 0.5 的 div。这在较大的背景滑块图像（外部 div）上充当一个变暗的矩形，以使文本在滑块背景图片上更具可读性。

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

这很好用，但是我想为矩形设置几个像素 (3px-6px) 的渐变边框，将 alpha 从外部光驱动到内部变暗。

不幸的是我找不到如何做到这一点，甚至不知道是否可以使用纯CSS，或者我必须为4“边框创建4个png图像并安排布局？

【问题讨论】：

您目前是如何添加边框的？我们能看到吗？
没有 CSS 边框。我使用纯英文含义的“边界”术语。整个 CSS 就是示例中的内容。见我要添加的图片。如果有效的解决方案是添加 CSS 边框（我也在 google 中搜索过），请告诉我它是如何渐变，以及如何正确渲染角渐变
好的，解决方案应该支持哪些浏览器？ IE11+等现代浏览器就够用了还是需要支持老版本的？
幸运的是，我不想支持旧版浏览器。然而，解决方案应该优雅地退回到“无渐变”渲染图片上的内容。
这个渐变怎么样？ colorzilla.com/gradient-editor/…

标签： html css

【解决方案1】：

我想你想要的是box-shadow，见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);
}

【讨论】：

【解决方案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;
}

【讨论】：

请在您的回答中添加一些详细信息，说明为什么这会解决问题