结合实线和虚线边框

Question

我想为我的块元素设置一个边框，如下所示：

即。我想设置一个黄色实心边框和黑色虚线边框，位于黄色实体上方。怎么做？

Answer 1

为元素指定黄色边框，然后使用伪元素创建虚线边框：

div {
    position: relative;
    border-bottom: 1px solid yellow;
}

div:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    border-bottom: 1px dashed #666;
}

这是小提琴：http://jsfiddle.net/z8BSs/

Answer 2

您可以使用框阴影，因为您可以根据需要声明任意数量。然后使用边框作为中心虚线。 这是一个小提琴http://jsfiddle.net/Tetx6/

.borders {
    height:300px;
    width:300px;
    -webkit-box-shadow:0 0 0 10px yellow,
      inset 0 0 0 10px yellow;
    -moz-box-shadow:0 0 0 10px yellow,
      inset 0 0 0 10px yellow;
    -o-box-shadow:0 0 0 10px yellow,
      inset 0 0 0 10px yellow;
    box-shadow:0 0 0 10px yellow,
      inset 0 0 0 10px yellow;

    border:10px dashed black;
}

Answer 3

你也可以使用border + outline测试一下：

div {
  margin:5em;
  padding:2em;
  outline:dashed 10px;/* same size as border */
  border:solid yellow 10px ;/* same size as outline */
  outline-offset:-10px;/* negative value as opposite size of border/outline */
}

http://codepen.io/anon/pen/Dhlzx

............................................... 。 使用box-shadow的另一种方法是：

    div {
      margin:5em;
      padding:2em;
      border:dashed 10px;
      background:yellow;
      box-shadow:inset 0 0 0 2000px white;/* this gives a white background , you may use multiple shadow and resize them in order to
 hide background color that will remain seen behind border dashed, double or dotted*/
}

http://codepen.io/anon/pen/qgGke