html - 边框内的CSS边框？

Question

是否可以在边框内做 CSS 边框？

这是我想要做的：截图

我想避免额外的 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;
}

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

有关第二个示例，请参见 jsfiddle，在该示例中，您可以使用 CSScontent属性而不是边框​​来控制虚线边框中的点之间的空间。

Answer 1

几个选项：

1. 使用边框+轮廓
2. 使用伪元素
3. 使用多个盒子阴影
4. 使用边框图像

谷歌搜索其中任何一个都会带来大量资源

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

编辑：更新 JSFiddle 以显示两种可能的解决方案；一种使用 box-shadows，另一种使用伪元素。

的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和:after或before这样

演示：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;
}

或者你可以只使用 box-shadow 和边框

演示：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);
}