Css 创建半透明边框

我正在尝试创建半透明的边框，如上所示。我只能做到

---

如何使边框看起来像屏幕截图上的边框？

背景有一个CSS3属性，可以使用该属性使半透明边框位于元素的背景之外。这叫做背景剪辑。默认情况下，其属性为背景剪辑：边框框；。 在您的情况下，您可能应该使用：

background-clip: padding-box;

这样，背景将接触边界，但不会覆盖边界，因此它们将保持半透明

参考：

另一个选项是使用框阴影代替边框。例如：

element { box-shadow: 0 0 0 5px rgba(255, 255, 255, .5; }

---

它也会有同样的效果。

你没有。您只需在长方体后面创建一个元素，并将其设置为边框样式：

身体{ 背景：urlhttp://fc07.deviantart.net/fs70/f/2013/174/3/e/recycled_texture_background_by_sandeep_m-d6aeau9.jpg 1000px 1000px； } .boxContainer{ 宽度：500px； 高度：200px； 显示：块； 保证金：0自动； 位置：相对位置； } .boxContainer.border{ 宽度：100%； 身高：100%； 显示：块； 背景：白色； 不透明度：0.3； 边界半径：10px； 位置：绝对位置； } .boxContainer.box{ 显示：块； 利润率：10px； 宽度：calc100%-20px； 高度：calc100%-20px； 背景：EEEE； 位置：绝对位置； 边界半径：5px； }