Erstellen Sie ein "Punkt-Strich" border mit css oder javascript?

In css3 planen Sie einen Rahmen hinzufügen-Stil namens "dot-dash", die wie folgt Aussehen wird:

neue Grenzen in css3 (link zu einem Bild w3.org)

Leider noch nicht implementiert ist, in jedem browser, und ich brauche diese Art der Grenze Sie sich jetzt für eine web-app.
Die Anwendung arbeitet mit dem Javascript-Framework ExtJS, so ist die Lösung von meinem problem, kann ein javascript ein, auch.

Ich habe bereits versucht, mit einem hintergrund-Bild (sehr schlechte Lösung, ich weiß) - aber das hat nicht funktioniert, weil es werden viele divs mit dieser Grenze, die alle unterschiedliche Größen haben (die ich nicht vorher wissen).

Danke!

  • Look-up-border-Bild 😉
InformationsquelleAutor Ansichtssache | 2013-06-13
  1. 2

    Wird es wohl werden, unterstützt von allen Browsern in der Zukunft, aber jetzt, ich glaube nicht, dass es ein unterstütztes Grenze geben. Hier ist eine test Seite jemand aus mit den verschiedenen Rahmentypen: http://www.aaronsw.com/2002/testcss

    Werden Sie wahrscheinlich verwenden Sie ein border-image wie Kyle vorgeschlagen. http://www.w3schools.com/cssref/css3_pr_border-image.asp

    Obwohl es sieht aus wie der Internet Explorer gar nicht unterstützen, dass noch. Überraschung!

    Hier ist ein workaround für den IE: border-image: workaround für den IE

    • border-image funktioniert perfekt in allen gängigen Browsern außer dem IE. Leider das workaround mit "Verhalten: ..." funktioniert nur für IE 8 und 9; es ist nicht unterstützt in IE 10. Aber das ist genug für den moment. Danke, Matt!
    InformationsquelleAutor Matt Becker
  2. 8

    Gut, wenn Sie es nicht haben, machen Sie es selbst !

    Das Rezept für eine Strich-Punkt: 1 Teil von dash und 1 Teil 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

    InformationsquelleAutor vals
  3. 0

    Brauchte ich etwas sehr nah an diese und kam mit einer variation von vals' Lösung. Dies setzt eine kontinuierliche durchgezogene Linie statt Bindestrichen, aber ich zeige es hier, weil es entfällt die Notwendigkeit für das position: absolute auf der 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;
}
    InformationsquelleAutor Luke Gedeon
  4. 0

    Wenn Sie nur die untere Grenze, Sie könnten versuchen, die folgenden 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;
}

    Bitte beachten Sie, dass die Bindestriche im obigen code sind spezielle unicode-Zeichen und sind nicht diejenigen, die auf der englischen Tastatur (die Punkte und Striche nicht ausrichten auf der gleichen Linie).

    Ändern Sie bitte die pixel-Eigenschaften Werte entsprechend Ihrem Bedarf. Ich fand alle diese Eigenschaften sind nötig, um das gleiche Verhalten in verschiedenen Browsern.

    @vals Lösung wird funktionieren, aber mit widersprüchlichen Ergebnissen über Browser, speziell IE erstreckt sich die Striche.

    InformationsquelleAutor Arun K
Schreibe einen Kommentar