CSS dissolvenza superiore e inferiore "confini"

Question

Date un'occhiata a questo: http://jsfiddle.net/wjhnX/

ho raggiunto con questo CSS:

background-image: radial-gradient(#CCC, #FFF), radial-gradient(#CCC, #FFF); 
background-size: 2px 100%; 
background-position: 0 0, 100% 0; 
background-repeat: no-repeat; 

Questo è possibile da fare, ma i confini simulati sarebbe alto e in basso , non a destra ea manca?

Grazie in anticipo!

Answer 1

Vuoi qualcosa di simile?

Demo (certo respiro per il contenuto, ho usato margin lì, basta assicurarsi che applicherà ad entrambi, :before così come :after, quindi se si vuole separare, dichiarare il margine separatamente per ciascuna, ps - i colori che ho fatto lil più leggeri)

/* Using only background gradients */ 

.one { 
    width: 400px; 
    padding: 20px 25px; 
    margin: 40px auto; 
} 

.one:before, .one:after { 
    content: ""; 
    height: 1px; 
    /* I've removed the vendor prefixes, if you are looking to support older browsers 
     then refer to older version of this answer. 
    */ 
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%); 
    display: block; 
    margin-bottom: 10px; 
    margin-top: 10px; 
} 

Spiegazione: ho usato :before e :after pseudo avere content: "", così crea un blocco, si può dire un blocco virtuale all'interno dell'elemento ... e che è ulteriormente impostato su display: block, assicurati di utilizzare block là margini altro e height non avrà alcun effetto .. e, ultimo ma non meno importante sto usando pendenze con rgba per controllare l'alfa/opacità del gradiente che svanirà su entrambe le estremità

Answer 2

si può fare con un separatore come bene.

LIVE DEMO

.seperator 
{ 
    width: 400px; 
    height: 2px; 
    margin: 30px; 
    background-image: radial-gradient(#CCC, #FFF), radial-gradient(#CCC, #FFF); 
    background-position: 0, 100%, 0, 100%; 
} 

.one { 
    width: 400px; 
    height: 140px; 
    margin: auto; 
}