html - 用阴影堆叠两个边框？

Question

我怎么能在另一个边框周围环绕一个边框并让它们都使用嵌入的阴影（比如相框中的双重抠图）？

Answer 1

这是我关于这个话题的小提琴

---

选项1）

您可以使用伪类来完成此操作

html

<span class="doubleMatt">
    <img src="http://lorempixel.com/400/200/" />
</span>

CSS

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:" ";
}​

---

选项 2)

您可以使用一些基本的（一维）优点

CSS

.basicMatt {
    background:#222;
    padding:3px;
    border:3px solid #666;
}

HTML

<img class="basicMatt" src="http://www.lorempixel.com/400/200/" />

---

选项 3)

你可以使用大纲

CSS

.outlinedMatt{
    background:#fff;
    padding:8px;
    border:3px solid #222;
    outline:3px solid #666;
    margin:3px;
}

HTML

<img class="outlinedMatt" src="http://www.lorempixel.com/400/200" />

Answer 2

您可以嵌套 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;    
 }`

Answer 3

您可以使用:before和:after伪元素来完成此操作。请参阅答案末尾的 jsFiddle 演示。

HTML

<div class="frame"><img src="../img/logo.png"></div>

CSS

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

示例用法

• 外面的两个影子
• 内一影外一影
• 里面的两个影子
• 两个嵌入阴影、一个初始阴影和自定义背景-由 OP 请求
• 插入边框-复制https://stackoverflow.com/a/10904061/526741
• 可变长度内容