How to create a “dot-dash” border with css or javascript?

问题:

In css3, they plan to add a border-style called "dot-dash" that will look like this:

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

Unfortunately, that is not yet implemented in any browser, and I need that kind of border now for a web-app. The Application works with the Javascript-Framework ExtJS, so the solution of my problem can be a javascript one, too.

I already tried with a background-image (very bad solution, I know) - but that didn't work because there will be many divs with this border, which will all have different sizes (which I don't know before).

Thank you!

回答1:

It'll probably be supported by all browsers in the future, but as of now, I don't think it's a supported border type. Here's a test page someone made with the different border types: http://www.aaronsw.com/2002/testcss

You'll probably have to use a border image like Kyle suggested. http://www.w3schools.com/cssref/css3_pr_border-image.asp

Although it looks like Internet Explorer doesn't even support that yet. Surprise!

Here's a workaround for IE: border-image: workaround for IE

回答2:

Well, if you don't have it, make it by yourself !

The recipe for a dash-dot: 1 part of dash and 1 part of dot:

#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

回答3:

I needed something very close to this and came up with a variation of vals' solution. This uses a continuous solid line instead of dashes, but I am showing it here because it removes the need for position: absolute on the main 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; } 

回答4:

If you need only the bottom border, you could try the following css

Please note that the dashes in the above code are special unicode characters and are not the ones on the english keyboard (those dots and dashes wont align on the same line).

Please change the pixel properties values to match your need. I found all these properties are needed to get the same behavior across multiple browsers.

@vals solution will work but with inconsistent results across browsers especially IE stretches the dashes.

文章来源: How to create a “dot-dash” border with css or javascript?