创建半透明边框

Question

我正在尝试创建半透明的边框，如此屏幕截图所示。我只能做到这一点。

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

Answer 1

背景有一个 CSS3 属性，您可以使用该属性来具有保留在元素背景之外的半透明边框。它被称为background-clip.默认情况下，其属性为 background-clip: border-box; 。在您的情况下，您可能应该使用：

background-clip: padding-box;

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

参考： http://www.w3schools.com/cssref/css3_pr_background-clip.asp

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

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

它将具有相同的效果。

Answer 2

你没有。 您只需在框后面创建一个元素并将其样式设置为看起来像边框：

body{
    background:url(http://fc07.deviantart.net/fs70/f/2013/174/3/e/recycled_texture_background_by_sandeep_m-d6aeau9.jpg) 1000px 1000px;
}
.boxContainer{
    width:500px;
    height:200px;
    display:block;    
    margin:0 auto;
    position:relative;
}
.boxContainer .border{
    width:100%;
    height:100%;
    display:block;
    background:white;
    opacity:0.3;
    border-radius:10px;
    position:absolute;
}
.boxContainer .box{
    display:block;
    margin:10px;
    width:calc(100% - 20px);
    height:calc(100% - 20px);
    background:#EEEEEE;
    position:absolute;
    border-radius:5px;
}

<div class="boxContainer">
    <div class="border"></div>
    <div class="box"></div>
</div>

更新：

以下是它在您的网站上的外观示例：

小提琴