如何围绕另一个边框包裹边框并让它们都使用插入阴影（如图片框中的双重遮罩）？
答案 0 :(得分：1)
Here are my fiddle's on the topic
您可以使用Pseudo Classes来完成此任务
<span class="doubleMatt">
<img src="http://lorempixel.com/400/200/" />
</span>
span,img{padding:0;margin:0;border:0;}
.doubleMatt{
position:relative;
display:inline-block;
font-size:0;
line-height:0;
}
.doubleMatt:after{
position:absolute;
top:1px;
left:1px;
bottom:1px;
right:1px;
border:4px solid rgba(255,255,255,0.5);
outline:1px solid rgba(0,0,0,0.2);
content:" ";
}
你可以使用一些基本的（一维）善良
.basicMatt {
background:#222;
padding:3px;
border:3px solid #666;
}
<img class="basicMatt" src="http://www.lorempixel.com/400/200/" />
你可以使用大纲
.outlinedMatt{
background:#fff;
padding:8px;
border:3px solid #222;
outline:3px solid #666;
margin:3px;
}
<img class="outlinedMatt" src="http://www.lorempixel.com/400/200" />
答案 1 :(得分：1)
你可以嵌套div，如 - http://jsfiddle.net/nG4Td/2/
所示<div class="border">
<div class="border2">
<p>hello world</p>
</div>
</div>
CSS
.border{
border: 5px inset black;
background:#ccc;
width:200px;
height:200px;
padding:20px;
}
.border2{
border: 5px inset black;
background:#eee;
width:150px;
height:150px;
padding:20px;
}`
答案 2 :(得分：1)
您可以使用:before and :after pseudo-elements完成此操作。在答案结束时查看jsFiddle演示。
<div class="frame"><img src="../img/logo.png"></div>
.frame {
display:inline-block;
position:relative;
margin:20px;
z-index:5;
padding:10px;
background:#376b90;
}
.frame:before {
position:absolute;
content:".";
display:block;
font-size:0;
color:transparent;
/* Change left, right, top, bottom, and box-shadow to position */
left:0;
top:0;
right:0;
bottom:0;
box-shadow:inset 0 0 3px 2px black;
}
.frame:after {
position:absolute;
content:".";
display:block;
font-size:0;
color:transparent;
/* Change left, right, top, bottom, and box-shadow to position */
left:5px;
top:5px;
right:5px;
bottom:5px;
box-shadow:inset 0 0 3px 2px black;
}