Gradiente del bordo destro solo con la più recente sintassi del gradiente del webkit, anche quali browser supportano questo e come farlo anche in quelli?

Question

Eventuali altre domande relative a questo hanno risposte che forniscono la sintassi del webkit OLD, non la nuova sintassi, o non spiegano come applicare il gradiente di bordo a SOLO su un lato.

Quali browser supportano i bordi sfumati tramite CSS senza dover utilizzare le immagini?

Ho un esempio in JsFiddle di seguito, mostra un gradiente applicato a SOLO il bordo destro, in che modo rendere questo browser compatibile con tutti i browser che attualmente supportano i gradienti dei bordi CSS? Credo che la sintassi del gradiente nel mio esempio sia la vecchia sintassi usata dal webkit, hanno aggiornato la sintassi un anno fa circa credo, vorrei usare la nuova sintassi ma non riesco ad ogni tentativo. Non capisco cosa nella sintassi dice che il gradiente deve essere applicato SOLO sul lato destro, ho provato a regolare i numeri ma non capisco cosa lo stia facendo. grazie mille.

http://jsfiddle.net/nicktheandroid/MNax7/1/

---

Inoltre, ho un altro esempio di seguito, utilizza la nuova sintassi gradiente CSS che tutti i browser usano, ma il gradiente viene applicato a tutte le frontiere, volevo che applicata solo ai il bordo destro, come nell'esempio sopra.

http://jsfiddle.net/nicktheandroid/b875w/2/

Answer 1

sono necessari i valori di pertinenza di spessore del bordo nel codice:

0 100% 0 0/0 15px 0 0 stretch; 

I primi quattro numeri sono le attivazioni del gradiente per i quattro bordi (in alto, a destra, in basso, sinistra) quindi il bordo destro è impostato su 100% mentre gli altri sono disattivati.

I quattro numeri dopo/sono la larghezza dei bordi, ovviamente in alto, in basso e a sinistra sono impostati su 0 larghezza, e a destra è a 15px.

L'opzione di stiramento indica al gradiente di estendere l'intera lunghezza della lunghezza del bordo, l'altra opzione è rotonda ma viene utilizzata più con le immagini effettive (image.jpg) per decidere se ripetere l'immagine o allungarla sopra lunghezza. Non so se sono disponibili altre opzioni ancora ..

Here is an updated demo, usando la nuova sintassi con solo il bordo destro attivato.

Answer 2

Set image-slice:1 per il tuo div' s css proprietà.