边境内的CSS边框？

Question

是否可以在边框内执行CSS边框？

以下是我要做的事：screenshot

我想避免使用额外的html元素，并且因为视网膜设备而避免使用图像。如果我只能在元素的一侧放置CSS轮廓，那么我将是金色的，但这似乎不可能。

编辑：

以下是我发布的众多出色解决方案的最终结果 - 谢谢！

http://jsfiddle.net/kisabelle/9umMr/1/

HTML

<footer>
 <p>Example</p>
</footer>

CSS

footer{
 border-top: 15px solid #393734;
 position: relative;
}

footer:after{
 content:"";
 border-top: 2px #989593 dotted;
 position:absolute;
 top: -8px; 
 left:0;
 width:100%;
 height:0;
}

使用伪元素：在添加第二个边框（而不是box-shadow）后，允许在IE8及更高版本中支持。

请参阅jsfiddle以获取第二个示例，您可以使用CSS content属性而不是边框​​来控制虚线边框中的点之间的空间。

Answer 1

有两种选择：

1. 使用border + outline
2. 使用伪元素
3. 使用多个框阴影
4. 使用border-image

谷歌搜索任何这些都会带来大量资源

现在我已经看过屏幕抓取，我认为边框顶部加上一些盒子阴影的组合是你的答案：http://jsfiddle.net/ne9nm/

编辑：更新JSFiddle以显示两种可能的解决方案;一个使用盒子阴影，一个使用伪元素。

HTML：

<div id="example-1">Example 1</div>
<div id="example-2">Example 2</div>

CSS：

  div {
      background:rgb(100, 150, 100);
      width:100px;
      height:100px;
      padding:30px;
      margin:20px;
  }
  #example-1 {
      border-top:1px white dotted;
      box-shadow: inset 0 5px 0 grey, 0 -5px 0 grey
  }
  #example-2 {
      border-top:10px solid grey;
      position:relative;
  }
  #example-2:before {
      content:"";
      position:absolute;
      width:100%;
      height:0;
      border-top:1px white dotted;
      top:-5px;
      left:0;
  }

Answer 2

你可以使用来自css的box-shadow和inset以及：之后或之前的

演示：http://jsfiddle.net/uXpaX/1/

body{
    background:#aaa;
}

figure{
    width:250px;
    height:300px;
    margin:20px auto;
    background: rgb(140, 179, 140);
    padding:20px;
    position:relative;
    box-shadow: 0 -10px 0 black,inset 0 10px 0 black;
}
figure:after{
    position:absolute;
    top:-2px;
    left:0;
    height:1px;
    width:100%;
    content:'';
    border-top:4px dashed white;
}

或者您可以使用框阴影和边框

演示：http://jsfiddle.net/uXpaX/

body{
    background:#aaa;
}

figure{
    width:250px;
    height:300px;
    margin:20px auto;
    background: rgb(140, 179, 140);
    padding:20px;
    border-top: 2px dashed white;
    position:relative;
    box-shadow: 0 -10px 0 black,inset 0 10px 0 black;
}

HTML

<figure>
    <figcaption>Coustomer Care</figcaption>
    <menu type=list>
        <li>Billing</li>
        <li>Shipping & Tracking</li>
        <li>Returns & Exchanges</li>
        <li>Products & Sizing</li>
        <li>Contact</li>
    </menu>
</figure>

或使用像这样的其他盒子阴影技巧

演示：http://jsfiddle.net/uXpaX/2/

body{
    background:#aaa;
}

figure{
    width:250px;
    height:300px;
    margin:20px auto;
    background: black;
    padding:20px;
    border-top: 2px dashed white;
    position:relative;
    box-shadow: 0 -10px 0 black,inset 0 10px 0 black,inset 0 100em rgb(140, 179, 140);
}