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

Question

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

不幸的是，这还没有在任何浏览器中实现，我现在需要这种边框用于网络应用程序。该应用程序与 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;
}

演示

Answer 2

未来可能所有浏览器都支持它，但截至目前，我认为它不是受支持的边框类型。这是某人使用不同边框类型制作的测试页面：http ://www.aaronsw.com/2002/testcss

您可能必须使用 Kyle 建议的边框图像。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 会拉伸破折号。