Sto usando il bordo di stile punteggiato nella mia scatola come
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
Voglio aumentare lo spazio tra ogni punto del bordo.
Sto usando il bordo di stile punteggiato nella mia scatola come
.box {
width: 300px;
height: 200px;
border: dotted 1px #f00;
float: left;
}
Voglio aumentare lo spazio tra ogni punto del bordo.
Risposte:
Questo trucco funziona sia per i bordi orizzontali che verticali:
/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;
/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;
È possibile regolare la dimensione con la dimensione dello sfondo e la proporzione con le percentuali del gradiente lineare. In questo esempio ho una linea tratteggiata di punti 1px e spaziatura 2px. In questo modo puoi avere anche più bordi tratteggiati usando più sfondi.
Provalo in questo JSFiddle o dai un'occhiata all'esempio dello snippet di codice:
Ecco un trucco che ho usato in un recente progetto per ottenere quasi tutto ciò che voglio con i bordi orizzontali. Uso <hr/>ogni volta che ho bisogno di un bordo orizzontale. Il modo di base per aggiungere un bordo a questo ora è qualcosa di simile
hr {border-bottom: 1px dotted #000;}Ma se vuoi prendere il controllo del bordo e, ad esempio aumentare, lo spazio tra i punti, puoi provare qualcosa del genere:
hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}
E di seguito, crei il tuo bordo (ecco un esempio con punti)
hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}
Ciò significa anche che puoi aggiungere un'ombra di testo a punti, sfumature, ecc. Tutto ciò che desideri ...
Bene, funziona davvero alla grande per i bordi orizzontali. Se hai bisogno di quelli verticali, puoi specificare una classe per un altro ora e usare la rotationproprietà CSS3 .
Non puoi farlo con CSS puro - le specifiche CSS3 hanno anche una citazione specifica su questo:
Nota: non vi è alcun controllo sulla spaziatura dei punti e dei trattini, né sulla lunghezza dei trattini. Le implementazioni sono incoraggiate a scegliere una spaziatura che renda simmetrici gli angoli.
Puoi, tuttavia, utilizzare un'immagine di bordo o un'immagine di sfondo che fa il trucco.
border: dotted, ma è possibile farlo usando i gradienti come ha mostrato la risposta di Eagorajose.
Questo utilizza il bordo CSS standard e uno pseudo elemento + overflow: nascosto. Nell'esempio si ottengono tre diversi bordi tratteggiati 2px: normale, spaziato come un 5px, spaziato come un 10px. In realtà è 10px con solo 10-8 = 2px visibili.
div.two{border:2px dashed #FF0000}
div.five:before {
content: "";
position: absolute;
border: 5px dashed #FF0000;
top: -3px;
bottom: -3px;
left: -3px;
right: -3px;
}
div.ten:before {
content: "";
position: absolute;
border: 10px dashed #FF0000;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
}
div.odd:before {left:0;right:0;border-radius:60px}
div {
overflow: hidden;
position: relative;
text-align:center;
padding:10px;
margin-bottom:20px;
}<div class="two">Kupo nuts here</div>
<div class="five">Kupo nuts<br/>here</div>
<div class="ten">Kupo<br/>nuts<br/>here</div>
<div class="ten odd">Kupo<br/>nuts<br/>here</div>Applicato a piccoli elementi con grandi angoli arrotondati può rendere alcuni effetti divertenti.
Quindi, a partire dalla risposta fornita e applicando il fatto che CSS3 consente più impostazioni - il codice seguente è utile per creare un box completo:
#border {
width: 200px;
height: 100px;
background: yellow;
text-align: center;
line-height: 100px;
background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
background-position: top, right, bottom, left;
background-repeat: repeat-x, repeat-y;
background-size: 10px 1px, 1px 10px;
}<div id="border">
bordered area
</div>Vale la pena notare che il 10px nella dimensione dello sfondo fornisce l'area che tratteggia e la distanza coprirà. Il 50% del tag di sfondo è la larghezza del trattino. È quindi possibile avere trattini di lunghezza diversa su ciascun lato del bordo.
Consulta i documenti MDN per i valori disponibili per border-style:
- nessuno: nessun bordo, imposta la larghezza su 0. Questo è il valore predefinito.
- nascosto: uguale a "nessuno", tranne in termini di risoluzione dei conflitti di confine per gli elementi della tabella.
- tratteggiata: serie di trattini o segmenti di linea brevi.
- punteggiato: serie di punti.
- double: due linee rette che si sommano alla quantità di pixel definita come larghezza del bordo.
- groove: effetto intagliato.
- inset: fa apparire la casella incorporata.
- inizio: di fronte a "inserto". Fa apparire la scatola 3D (in rilievo).
- cresta: di fronte a "groove". Il bordo appare 3D (in uscita).
- solido: linea singola, retta, continua.
A parte queste scelte, non c'è modo di influenzare lo stile del bordo standard.
Se le possibilità non ce ne sono di vostro gradimento, si potrebbe utilizzare CSS3 di border-imagema nota che il supporto del browser per questo è ancora molto discutibile.
Creazione di una soluzione a 4 bordi basata sulla risposta di @ Eagorajose con sintassi abbreviata:
background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */#page {
background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */
width: 100px;
height: 100px;
}<div id="page"></div>Questo è un argomento vecchio, ma ancora molto rilevante. L' attuale risposta migliore funziona bene, ma solo per punti molto piccoli. Come già sottolineato da Bhojendra Rauniyar nei commenti, per punti più grandi (> 2px), i punti appaiono quadrati, non rotondi. Ho trovato questa pagina alla ricerca di punti distanziati , non quadrati distanziati (o persino trattini, come usano alcune risposte qui).
Basandomi su questo, ho usato radial-gradient. Inoltre, usando la risposta di Ukuser32 , le proprietà dei punti possono essere facilmente ripetute per tutti e quattro i bordi. Solo gli angoli non sono perfetti.
div {
padding: 1em;
background-image:
radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px),
radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px);
background-position: top, right, bottom, left;
background-size: 15px 5px, 5px 15px;
background-repeat: repeat-x, repeat-y;
}<div>Some content with round, spaced dots as border</div>Si radial-gradient aspetta :
Qui, volevo un punto di 5 pixel di diametro (raggio 2,5px), con 2 volte il diametro (10px) tra i punti, aggiungendo fino a 15px. Il background-sizedeve corrispondere questi.
Le due fermate sono definite in modo tale che il punto sia gradevole e liscio: nero solido per metà del raggio e di un gradiente per l'intero raggio.
Questa è una domanda molto vecchia, ma ha un alto posizionamento in Google, quindi ho intenzione di inserire il mio metodo che potrebbe funzionare a seconda delle tue esigenze.
Nel mio caso, volevo un bordo tratteggiato spesso che avesse un'interruzione minima tra i trattini. Ho usato un generatore di pattern CSS (come questo: http://www.patternify.com/ ) per creare un pattern largo 10 pixel e alto 1 pixel. 9px di questo è un colore trattino solido, 1px è bianco.
Nel mio CSS, ho incluso quel modello come immagine di sfondo e poi l'ho ridimensionato usando l'attributo size-background. Ho finito con un trattino ripetuto di 20px per 2px, di cui 18px in linea continua e 2px in bianco. Potresti ridimensionarlo ancora di più per una linea tratteggiata davvero spessa.
La cosa bella è che l'immagine è codificata come dati che non hanno l'ulteriore richiesta HTTP esterna, quindi non ci sono costi per le prestazioni. Ho archiviato la mia immagine come variabile SASS in modo da poterla riutilizzare nel mio sito.
Risposta breve: non puoi.
Dovrai usare la border-imageproprietà e alcune immagini.
Così tante persone dicono "Non puoi". Si, puoi. È vero che non esiste una regola CSS per controllare lo spazio tra i trattini, ma CSS ha altre abilità. Non essere così veloce nel dire che una cosa non può essere fatta.
.hr {
border-top: 5px dashed #CFCBCC;
margin: 30px 0;
position: relative;
}
.hr:before {
background-color: #FFFFFF;
content: "";
height: 10px;
position: absolute;
top: -2px;
width: 100%;
}
.hr:after {
background-color: #FFFFFF;
content: "";
height: 10px;
position: absolute;
top: -13px;
width: 100%;
}Fondamentalmente l'altezza del bordo superiore (5px in questo caso) è la regola che determina la "larghezza" della grondaia. Ovviamente dovrai adattare i colori per soddisfare le tue esigenze. Questo è anche un piccolo esempio per una linea orizzontale, usare sinistra e destra per creare la linea verticale.
Ho creato una funzione JavaScript per creare punti con uno svg. È possibile regolare la spaziatura e la dimensione dei punti nel codice JavaScript.
var make_dotted_borders = function() {
// EDIT THESE SETTINGS:
var spacing = 8;
var dot_width = 2;
var dot_height = 2;
//---------------------
var dotteds = document.getElementsByClassName("dotted");
for (var i = 0; i < dotteds.length; i++) {
var width = dotteds[i].clientWidth + 1.5;
var height = dotteds[i].clientHeight;
var horizontal_count = Math.floor(width / spacing);
var h_spacing_percent = 100 / horizontal_count;
var h_subtraction_percent = ((dot_width / 2) / width) * 100;
var vertical_count = Math.floor(height / spacing);
var v_spacing_percent = 100 / vertical_count;
var v_subtraction_percent = ((dot_height / 2) / height) * 100;
var dot_container = document.createElement("div");
dot_container.classList.add("dot_container");
dot_container.style.display = getComputedStyle(dotteds[i], null).display;
var clone = dotteds[i].cloneNode(true);
dotteds[i].parentElement.replaceChild(dot_container, dotteds[i]);
dot_container.appendChild(clone);
for (var x = 0; x < horizontal_count; x++) {
// The Top Dots
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";
var left_percent = (h_spacing_percent * x) - h_subtraction_percent;
dot.style.left = left_percent + "%";
dot.style.top = (-dot_height / 2) + "px";
dot_container.appendChild(dot);
// The Bottom Dots
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";
dot.style.left = (h_spacing_percent * x) - h_subtraction_percent + "%";
dot.style.top = height - (dot_height / 2) + "px";
dot_container.appendChild(dot);
}
for (var y = 1; y < vertical_count; y++) {
// The Left Dots:
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";
dot.style.left = (-dot_width / 2) + "px";
dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
dot_container.appendChild(dot);
}
for (var y = 0; y < vertical_count + 1; y++) {
// The Right Dots:
var dot = document.createElement("div");
dot.classList.add("dot");
dot.style.width = dot_width + "px";
dot.style.height = dot_height + "px";
dot.style.left = width - (dot_width / 2) + "px";
if (y < vertical_count) {
dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
}
else {
dot.style.top = height - (dot_height / 2) + "px";
}
dot_container.appendChild(dot);
}
}
}
make_dotted_borders();div.dotted {
display: inline-block;
padding: 0.5em;
}
div.dot_container {
position: relative;
margin-left: 0.25em;
margin-right: 0.25em;
}
div.dot {
position: absolute;
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="50" fill="black" /></svg>');
}<div class="dotted">Lorem Ipsum</div>SE stai prendendo di mira solo i browser moderni, E puoi avere il tuo bordo su un elemento separato dal tuo contenuto, quindi puoi usare la trasformazione della scala CSS per ottenere un punto o un trattino più grande:
border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);Ci vuole un sacco di modifiche posizionali per farlo allineare, ma funziona. Modificando lo spessore del bordo, la dimensione iniziale e il fattore di scala, è possibile ottenere il rapporto spessore-lunghezza desiderato. L'unica cosa che non puoi toccare è il rapporto trattino-gap.
scale(8)
<div style="width: 100%; height: 100vh; max-height: 20px; max-width: 100%; background: url('https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/themes/853636/settings_images/Ei2yf3t7TvyRpFaLQZiX_dot.jpg') #000; background-repeat: repeat;"> </div>questo è quello che ho fatto - usa un'immagine inserisci qui la descrizione dell'immagine
È possibile creare un'area di disegno (tramite JavaScript) e tracciare una linea tratteggiata all'interno. All'interno della tela puoi controllare quanto devono essere lunghi il trattino e lo spazio in mezzo.