边界：之前

Question

.box{
  opacity: 0.8;
  position: absolute;
  top: 28px;
  left: 45px;
  width: 280px;
background: green
}
  .box:before{
    content: '';
    border: 5px solid pink;
    margin: 10px;
    width: 300px;
  }

尝试在框和边框之间的空白间隙中制作带边框的框。我尝试了框中的边框或：之前但边框没有显示在框外以及空白区域。

感谢帮助。

Answer 1

最干净的方法是使用以下CSS：

#box{
     position:relative;
    z-index:10;
    padding:0px;
    background:#fff;
    border:12px solid #390;
    width: 100px;
    height: 100px;
}
#box:before {
    content:"";
    display:block;
    position:absolute;
    z-index:-1; top:2px;
    left:2px;
    right:2px; 
    bottom:2px;
    background-color: pink
}

请参阅此处的演示：http://jsfiddle.net/fvHJq/1/

Answer 2

根据您的需求，简单的outline可能有所帮助：

.box {
    width: 300px;
    height: 300px;
    background: #1baaaa;
    border: 10px solid #fff;
    outline: 5px solid #ff7474;
}

Fiddle