border - 任何边框空白技巧？对于 CSS

Question

我需要一些技巧来使用这样的 CSS 插入边框空白区域..

我像这样使用 CSS box-shadow

 box-shadow:
        -1px 0px 0px 0px #000,
        0px -1px 0px 0px #000,
        0px 1px 0px 0px #000,
        1px 1px 0px 0px #000

我不知道如何使边框/阴影看起来像图片。

我将只使用一个 html 元素.. <div></div>

有什么技巧吗？

Playground : http://jsfiddle.net/ES66k/

Answer 1

只有一个 div:http://jsfiddle.net/ES66k/1/ (在 Fx18 和 chrome 上测试)

div {
  width:300px;
  height:170px;
  margin:100px;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  position: relative;
}

div:after, div:before {
   content: "";
   position: absolute;
   top: -1px;
   width: 20px;
   height: 172px;
   border-top: 40px white solid;
   border-bottom: 40px white solid;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

div:before { border-left: 1px black solid; left: 0; }
div:after { border-right: 1px black solid; right: 0; }

无论如何，它有点老套，因为它依赖固定的高度和纯色作为背景(白色)，但也许对您的目的有用。