创建半透明边框

Question

我正在尝试像 this screenshot. I could only achieve this 那样创建半透明边框。

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

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>

更新：

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

Fiddle

创建半透明边框

Creating semi-transparent borders

css

border