Dividere il bordo in sezioni?

C'è un modo per dividere un bordo in sezioni in CSS? Quindi nel violino this ho un confine. Ma invece di avere un colore solido, come posso averlo in modo che poi è come this, ma la larghezza sarebbe stata impostata con JS. Quindi scegli di dire 3 colori. Quindi JS otterrebbe la larghezza che sarebbe del 33%, quindi i CSS imposterebbero il colore su ciascuno di essi. Idee?Dividere il bordo in sezioni?

Quindi qualcosa di simile

top{ 
border-top: 4px solid blue; 
}

Quindi modificare la larghezza e l'avere più di un colore

fonte

2014-05-14 Anonymous

Si potrebbe cercare di utilizzare un gradiente stesso che nel vostro secondo link esempio con 'border-image', anche se non sono sicuro se in realtà specifica permette che (e pigro per la ricerca ora). E l'alternativa sarebbe quella di usarlo esattamente come _is_ in quell'esempio - solo con uno pseudo elemento di contenuto generato posizionato nella parte superiore dell'elemento che si desidera avere un tale bordo superiore, in modo che nessun elemento aggiuntivo debba essere inserito nel markup. – CBroe

si ho costruito una demo e tutto, vedere la mia risposta qui sotto. – Ian

Ciao ci sono tre possibili soluzioni è quello che mi piace e utilizzare nel mio progetto utilizza una striscia di colore. e usando css ho appena "repeat-x". Esso funziona come fascino enter image description here

La seconda soluzione sta usando gradienti CSS3, ma io non lo consiglio in questo modo a causa di Croce problema Browser Compatibility appositamente IE.

Terza soluzione sta usando questa striscia di colore come Immagine di bordo, ma ricorda che questo potrebbe avere problemi con i browser più vecchi.

Io consiglio la soluzione uno, ma alla fine la scelta è tua. Good Luck

fonte

2014-05-14 02:49:01 Kashif

Come apparirebbe usando i gradienti? –

vedere bene la vostra auto a http://www.w3schools.com/css/css3_gradients.asp, come ho detto prima è solo questione di compatibilità del browser. Giocaci solo se vuoi usare le sfumature. – Kashif

No, non credo che ci sia, cioè, non sono a conoscenza di un mezzo attraverso il quale un singolo elemento può avere larghezza del bordo di uno dei suoi lati di larghezza variabile. Ma perché non usare semplicemente più elementi?

L'idea è di impilare un gruppo di div orizzontalmente, quindi semplicemente selezionare quelli che si desidera avere una larghezza diversa.

Questa soluzione farà semplicemente in modo che il div hover abbia un bordo con uno spessore di 10px. Notate, l'assenza di spazi bianchi tra i div (sono tutti su una riga) - spazi bianchi tra di loro causeranno una mancanza di spazi nella linea di colore.

Vedrai che ho usato una classe comune a ciascuno dei div (bordo). Ne ho usato un altro per dettare il colore, e ancora un altro per dettare lo spessore predefinito.

Infine, ho diviso la larghezza dello schermo (100%) per il numero di div che ho (4). Dato che hai 8 colori diversi, ti consigliamo di impostare la larghezza al 12,5%, anziché al 25%.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.border 
{ 
    border-top: solid 5px transparent; 
    width: 25%; 
    display: inline-block; 
    padding: 0px; 
    margin: 0px; 
} 
.border:hover 
{ 
    border-top-width: 10px; 
} 
.thick 
{ 
    border-top-width: 7px; 
} 
.thin 
{ 
    border-top-width: 3px; 
} 
.red 
{ 
    border-color: red; 
} 
.blue 
{ 
    border-color: blue; 
} 
.yellow 
{ 
    border-color: yellow; 
} 
.green 
{ 
    border-color: green; 
} 
</style> 
</head> 
<body> 
    <div class='border red thick'></div><div class='border blue thin'></div><div class='border green'></div><div class='border yellow'></div> 
</body> 
</html>

fonte

2014-05-14 02:56:53 enhzflep

Bene il colore non è impostato in questo modo, né è la larghezza. La larghezza è una variabile. Potrebbe essere 2 colori Forse 5, 10 o anche 100 –

Sì, e non c'è niente di difficile nell'usare javascript per generare i div richiesti - sia 2, 5, 10 o 100. L'esempio usa 8 valori di colore esplicitamente definiti, così come il mio - anche se 4, piuttosto di 8.Sospetto che la tua domanda non fornisca tutti i limiti imposti dalla tua situazione. Sentiti libero di aggiornare la tua domanda per fornire dettagli più completi. – enhzflep

consulta questo articolo. Raccomandano di farlo in modo simile al tuo HR ma usando pseudo elementi invece http://www.sitepoint.com/rainbow-border-with-sass/.

E 'possibile fare border-immagine con ma ha un supporto limitato (http://caniuse.com/border-image) Se siete interessati a questo approccio check out questa penna codice - http://codepen.io/samarkandiy/pen/lvrBn

Qui è qualcosa che ho lavorato fino a mostrarvi come potrebbe funzionare - http://jsfiddle.net/29gPg/

.border { 
    background-color: black; 
    background-size: 50px 50px; 
    display: inline; 
    float: left; 
    margin: 15px; 
    position: relative; 
    border-width: 20px; 
    width: 160px; 
    height: 160px; 
} 

.border { 
    border-image: linear-gradient(90deg, 
     #9b59b6 0%, 
     #9b59b6 25%, 
     #34495e 25%, 
     #34495e 50%, 
     #f1c40f 50%, 
     #f1c40f 75%, 
     #e67e22 75% 
    ) 2%; 
    border-top-width: 10px; 
    border-bottom: 0px; 
    border-left: 0px; 
    border-right: 0px; 
}

Un ultimo pensiero, se si pensa di utilizzare i CSS per modificare questo confine on-the-fly il CSS dovrà essere in linea o altrimenti si dovrà pre- crea un mucchio di immagini di bordi sfumati CSS e applicali tramite il nome della classe.

Modifica - questo border-immagine utilizza, ma funziona solo in WebKit (forse ie11 ma non testato)

Questa domanda ha raggiunto il picco il mio interesse, così sono andato oltre con la demo JSFiddle. http://jsfiddle.net/K2FEm/5/

Edit 2

Ok, quindi sembrerebbe che border-immagine non è supportata da FF a tutti o almeno non con gradienti come illustrato qui - http://css-tricks.com/examples/GradientBorder/.

Tuttavia c'è un trucco è possibile utilizzare, che sarebbe quella di utilizzare lo stesso gradiente (questa volta con il corretto prefisso del browser) come immagine di sfondo e posizionarlo correttamente. È possibile visualizzare i risultati in questo violino qui sotto, se si desidera impostare i vari colori potrete sia necessario scrivere uno script in JS/JQuery per creare dinamicamente i gradienti e poi applicarli agli elementi in linea, o fare come ho e faccio classi predeterminate che possono poi essere applicate a volontà (che in genere è il metodo preferito per ragioni di velocità e di memoria, ma si consiglia di andare con la prima opzione per il bene di flessibilità).

ho costruito il mio primo gradiente manualmente e poi ha ottenuto tutti i prefissi browser con - http://www.colorzilla.com/gradient-editor/ (. Questo è un grande strumento che uso per tutto il tempo)

DEMO

fonte

2014-05-14 03:00:25 Ian

Davvero non vedo come funziona con il mio attuale numero ... –

Seriamente? Guarda la demo che ho creato nella parte inferiore della mia pagina, puoi facilmente vedere come ottenere ciò che stai cercando di fare. – Ian

Sì ... Non funziona per cominciare. –

creare come molti elementi "span" come sezioni
larghezza di ogni span in base al numero di sezioni
impostare il colore di sfondo casuale su ciascuna sezione
Aggiungi loro di indirizzare div

HTML:

<div id="box"></div>

CSS:

#box { 
    background-color: black; 
    margin: 15px; 
    position: relative; 
    width: 90%; 
    height: 40px; 
    padding: 0; 
} 
.border_section{ 
    height: 4px; 
    display: block; 
    float: left; 
}

JavaScript:

var sections = Math.ceil(Math.random()*20); 
var target_div = document.getElementById('box'); 
var target_width = target_div.offsetWidth; 
var sec_width = Math.ceil(target_width/sections); 
for(i=0;i<sections;i++){ 
    if(i == sections-1){ 
    sec_width = target_width - ((sections-1)*sec_width)-1; 
    } 
    var borderSection=document.createElement("span"); 
    borderSection.className = "border_section"; 
    borderSection.style.backgroundColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6); 
    borderSection.style.width = sec_width+'px'; 
    target_div.appendChild(borderSection); 
}

DEMO

fonte

2014-05-15 07:07:03 Venugopal

Dividere il bordo in sezioni?

risposta

Problemi correlati