Controllare la lunghezza della corsa bordo tratteggiato e la distanza tra i tratti
-
03-10-2019 - |
Domanda
E 'possibile controllare la lunghezza e la distanza tra i tratti di confine tratteggiate in CSS?
Questo esempio sotto visualizza diverso tra i browser:
div {
border: dashed 4px #000;
padding: 20px;
display: inline-block;
}
<div>I have a dashed border!</div>
differenze Big: IE 11 / Firefox / Chrome
Ci sono metodi che possono fornire un maggiore controllo della comparsa confini tratteggiati?
Soluzione
Css di rendering è il browser specifico e non so alcuna messa a punto su di esso, si dovrebbe lavorare con le immagini, come raccomandato dal Ham. Riferimento: http://www.w3.org/TR/CSS2 /box.html#border-style-properties
Altri suggerimenti
Il tratteggiato valore nativo proprietà border non offre il controllo sui trattini stessi ... in modo da portare sulla proprietà border-image
!
Brew il proprio confine con border-image
Compatibilità : Offre grande supporto del browser (IE 11 e tutti i browser moderni) . Un bordo normale può essere impostato come un ripiego per i browser più vecchi.
Creiamo questi
Questi confini mostrerà esattamente la stessa cross-browser!
Passaggio 1 - Creare un'immagine adatta ??h2>
Questo esempio è largo 15 pixel per 15 pixel di altezza e le lacune sono attualmente 5px di larghezza. E 'un .png con la trasparenza.
Questo è quello che sembra in Photoshop utilizzando lo zoom in:
Questo è quello che sembra in scala:
Controllo gap e ictus lunghezza
Per creare lacune più ampie / più brevi o ictus, ampliare / accorciare le lacune o ictus nell'immagine.
Ecco un'immagine con più ampie 10px lacune:
correttamente in scala =
Passaggio 2 - Creare il CSS - questo esempio richiede 4 passaggi fondamentali
-
border-image-source:url("http://i.stack.imgur.com/wLdVc.png");
-
opzionale - Definire il -image larghezza :
border-image-width: 1;
Il valore predefinito è 1. Può anche essere impostato con un valore di pixel, valore percentuale, o come un altro multipla (1x, 2x, 3x, ecc). Ciò ignora qualsiasi insieme
border-width
. -
In questo esempio, lo spessore del piano immagini, destro, inferiore e bordi sinistro è 2px, e non v'è alcuno spazio al di fuori di essi, così il nostro valore fetta è 2:
border-image-slice: 2;
Le fette simile a questa, 2 pixel dalla parte superiore, a destra, in basso ea sinistra:
-
In questo esempio, vogliamo che il modello a ripetersi in modo uniforme in tutto il nostro div. Così abbiamo scelto:
border-image-repeat: round;
La scrittura abbreviata ??strong>
Le proprietà di cui sopra può essere impostato singolarmente, o in abbreviata utilizzando :
border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;
Esempio completo
Si noti il ??fallback border: dashed 4px #000
. Non sostenere i browser riceverà questo confine.
.bordered {
display: inline-block;
padding: 20px;
/* Fallback dashed border
- the 4px width here is overwritten with the border-image-width (if set)
- the border-image-width can be omitted below if it is the same as the 4px here
*/
border: dashed 4px #000;
/* Individual border image properties */
border-image-source: url("http://i.stack.imgur.com/wLdVc.png");
border-image-slice: 2;
border-image-repeat: round;
/* or use the shorthand border-image */
border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;
}
/*The border image of this one creates wider gaps*/
.largeGaps {
border-image-source: url("http://i.stack.imgur.com/LKclP.png");
margin: 0 20px;
}
<div class="bordered">This is bordered!</div>
<div class="bordered largeGaps">This is bordered and has larger gaps!</div>
Oltre alla proprietà border-image
, ci sono alcuni altri modi per creare un bordo tratteggiato il controllo sulla lunghezza della corsa e la distanza tra di loro. Essi sono descritti di seguito:
Metodo 1: Utilizzo di SVG
Possiamo creare il bordo tratteggiato utilizzando un path
o un elemento polygon
e impostando il stroke-dasharray
proprietà. La struttura prende due parametri in cui si definisce la dimensione del cruscotto e l'altra determina lo spazio tra di loro.
Pro:
- SVG per natura sono grafici sono scalabili e possono adattarsi a qualsiasi dimensione del contenitore.
- Può funzionare molto bene anche se c'è un
border-radius
coinvolti. Avremmo semplicemente sostituire ilpath
con uncircle
come in questa risposta (o) convertire ilpath
in un cerchio. - Browser supportati per SVG è piuttosto buona e fallback può essere fornita utilizzando VML per IE8- .
Contro:
- Quando le dimensioni del contenitore non cambiano proporzionalmente, i percorsi tendono a scalare un conseguente cambiamento nella dimensione del cruscotto e lo spazio tra di loro (provate bilico sulla prima casella nel frammento). Questo può essere controllato con l'aggiunta di
vector-effect='non-scaling-stroke'
(come nel secondo riquadro), ma il supporto del browser per questa proprietà è pari a zero in IE.
.dashed-vector {
position: relative;
height: 100px;
width: 300px;
}
svg {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
path{
fill: none;
stroke: blue;
stroke-width: 5;
stroke-dasharray: 10, 10;
}
span {
position: absolute;
top: 0px;
left: 0px;
padding: 10px;
}
/* just for demo */
div{
margin-bottom: 10px;
transition: all 1s;
}
div:hover{
height: 100px;
width: 400px;
}
<div class='dashed-vector'>
<svg viewBox='0 0 300 100' preserveAspectRatio='none'>
<path d='M0,0 300,0 300,100 0,100z' />
</svg>
<span>Some content</span>
</div>
<div class='dashed-vector'>
<svg viewBox='0 0 300 100' preserveAspectRatio='none'>
<path d='M0,0 300,0 300,100 0,100z' vector-effect='non-scaling-stroke'/>
</svg>
<span>Some content</span>
</div>
Metodo 2: Uso dei gradienti
Possiamo usare immagini multiple linear-gradient
di sfondo e la posizione in modo appropriato per creare un effetto di bordo tratteggiato. Questo può anche essere fatto con un repeating-linear-gradient
ma non c'è molto perfezionata per usando un gradiente ripetendo come abbiamo bisogno ogni sfumatura a ripetizione in una sola direzione.
.dashed-gradient{
height: 100px;
width: 200px;
padding: 10px;
background-image: linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%);
background-position: left top, left bottom, left top, right top;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}
.dashed-repeating-gradient {
height: 100px;
width: 200px;
padding: 10px;
background-image: repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%);
background-position: left top, left bottom, left top, right top;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}
/* just for demo */
div {
margin: 10px;
transition: all 1s;
}
div:hover {
height: 150px;
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='dashed-gradient'>Some content</div>
<div class='dashed-repeating-gradient'>Some content</div>
Pro:
- scalabile e può adattarsi anche se le dimensioni del contenitore sono dinamici.
- non fa uso di pseudo-elementi extra che significa che possono essere tenuti da parte per qualsiasi altro uso potenziale.
Contro:
- Browser supportati per gradienti lineari è relativamente più bassa e questo è un no-go se si vuole sostenere IE 9-. Anche le librerie come CSS3 PIE non supportano la creazione di modelli di gradiente in IE8 -.
- Non può essere utilizzato quando
border-radius
è coinvolto perché sfondi non lo fanno sulla base di curvaborder-radius
. Vengono invece tagliati.
Metodo 3: Box Shadows
può creare un piccolo bar (a forma di cruscotto) utilizzando pseudo-elementi e quindi creare più versioni box-shadow
di esso per creare un bordo come nel seguito frammento.
Se il cruscotto è una forma quadrata poi un unico pseudo-elemento sarebbe sufficiente, ma se si tratta di un rettangolo, avremmo bisogno di uno pseudo-elemento per i primi + bordi inferiori e un altro per SINISTRO + confini di destra. Questo perché l'altezza e la larghezza per il trattino sul bordo superiore sarà diverso da quello a sinistra.
Pro:
- Le dimensioni del cruscotto è controllabile variando le dimensioni della pseudo-elemento. La spaziatura è controllabile modificando lo spaziotra ogni ombra.
- Un effetto molto unico può essere prodotta aggiungendo un colore diverso per ogni scatola ombra.
Contro:
- Poiché abbiamo impostare manualmente le dimensioni del cruscotto e la spaziatura, questo approccio non è buono quando le dimensioni della scatola principale è dinamica.
- IE8 ed inferiori non supporto scatola di ombra . Tuttavia, questo può essere superato utilizzando librerie come CSS3 PIE.
- Può essere utilizzato con
border-radius
ma posizionandoli sarebbe molto difficile con dover trovare i punti su un cerchio (e forse anchetransform
).
.dashed-box-shadow{
position: relative;
height: 120px;
width: 120px;
padding: 10px;
}
.dashed-box-shadow:before{ /* for border top and bottom */
position: absolute;
content: '';
top: 0px;
left: 0px;
height: 3px; /* height of the border top and bottom */
width: 10px; /* width of the border top and bottom */
background: blue; /* border color */
box-shadow: 20px 0px 0px blue, 40px 0px 0px blue, 60px 0px 0px blue, 80px 0px 0px blue, 100px 0px 0px blue, /* top border */
0px 110px 0px blue, 20px 110px 0px blue, 40px 110px 0px blue, 60px 110px 0px blue, 80px 110px 0px blue, 100px 110px 0px blue; /* bottom border */
}
.dashed-box-shadow:after{ /* for border left and right */
position: absolute;
content: '';
top: 0px;
left: 0px;
height: 10px; /* height of the border left and right */
width: 3px; /* width of the border left and right */
background: blue; /* border color */
box-shadow: 0px 20px 0px blue, 0px 40px 0px blue, 0px 60px 0px blue, 0px 80px 0px blue, 0px 100px 0px blue, /* left border */
110px 0px 0px blue, 110px 20px 0px blue, 110px 40px 0px blue, 110px 60px 0px blue, 110px 80px 0px blue, 110px 100px 0px blue; /* right border */
}
<div class='dashed-box-shadow'>Some content</div>
corta: No, non lo è. Si dovrà lavorare con le immagini, invece.