Question

我尝试创建像this screenshot一样的半透明边框。我只能实现this。

如何使边框看起来像截图上的那些？

Answer 1

您可以使用背景的CSS3属性，以使半透明边框位于元素的背景之外。它被称为background-clip。默认情况下，其属性为background-clip: border-box;。在你的情况下你应该使用：

background-clip: padding-box;

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

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

另一个选择是使用box-shadow而不是border。例如：

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

它会产生同样的效果。

Answer 2

你不这样做。你只需在盒子后面创建一个元素，并将其设计为边框：

＆＃13;

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

＆＃13;

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

＆＃13;

<强>更新

以下是您在网站上看到的示例：

的 Fiddle

创建半透明边框

2 个答案: