Question

在css3中，他们计划添加一个名为“dot-dash”的边框样式，如下所示：

new borders in css3 (link to an image on w3.org)

不幸的是，这还没有在任何浏览器中实现，我现在需要这种边框用于网络应用程序。该应用程序与Javascript-Framework ExtJS一起使用，因此我的问题的解决方案也可以是javascript。

我已经尝试过背景图像（非常糟糕的解决方案，我知道） - 但是这没有用，因为会有很多这个边框的div，它们都有不同的尺寸（我之前不知道））。

谢谢！

Answer 1

好吧，如果你没有它，那就自己动手吧！

点划线的配方：短划线的1个部分和点的1个部分：

#dash {
    width: 200px;
    height: 200px;
    left: 35px;
    top: 35px;
    position: absolute;
    background-color: lightblue;
    border: dashed 6px red;
}

#dash:after {
    content: '';
    width: 100%;
    height: 100%;
    left: -6px;    
    top: -6px;
    position: absolute;
    border: dotted 6px red;
}

demo

Answer 2

将来可能会得到所有浏览器的支持，但截至目前，我认为它不是受支持的边框类型。以下是使用不同边框类型制作的测试页：http://www.aaronsw.com/2002/testcss

你可能不得不使用像凯尔建议的边框图像。 http://www.w3schools.com/cssref/css3_pr_border-image.asp

虽然看起来Internet Explorer甚至还不支持。惊喜！

以下是IE的解决方法：border-image: workaround for IE

Answer 3

我需要一些非常接近这一点的东西，并提出了各种各样的vals解决方案。这使用连续的实线而不是破折号，但我在这里显示它是因为它消除了对主要div的位置：绝对的需要。

.dash {
    background: none;
    position: relative;
    box-shadow: inset 0 0 0 1px #fff,
                inset 0 0 1px 1px #000;
}

.dash:after {
    box-sizing: border-box;
    content: '';
    width: 100%;
    height: 100%;
    left: 0px;    
    top: 0px;
    position: absolute;
    border: dotted 3px #bbb;
    border-left: 3px solid white;
    border-right: 3px solid white;
}

Answer 4

如果您只需要底部边框，可以尝试以下css

.class:after {
    content: '–⋅–⋅–⋅–⋅–⋅–';
    display: block;
    position: absolute;
    top: 30px;
    left: -4px;
    font-size: xx-large;
    font-weight: bolder;
    color: #59defc;
    height: 12px;
    overflow:hidden;
    width: 130px;
}

请注意，上面代码中的破折号是特殊的unicode字符，而不是英文键盘上的破折号（那些点和破折号不会在同一行上对齐）。

请更改像素属性值以符合您的需要。我发现需要所有这些属性才能在多个浏览器中获得相同的行为。

@vals解决方案可以正常工作，但浏览器的结果不一致，尤其是IE浏览器会破坏破折号。

如何用css或javascript创建“点划线”边框？

4 个答案:

demo