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

Question

在css3中,他们计划添加一个名为"dot-dash"的边框样式,如下所示:

css3中的新边框(链接到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;
}

演示

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