html - 合并实线和虚线边框

Question

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

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

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;
}

这是 fiddle :http://jsfiddle.net/z8BSs/