example - CSS desvaneciendo los "bordes" superiores e inferiores

div background image css

Question

Eche un vistazo a esto: http://jsfiddle.net/wjhnX/

Lo logré con este 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;

¿Es posible hacer esto pero los bordes simulados serían los de arriba y abajo, no los de izquierda y de derecha?

Gracias por delante

Answer 1

¿Quieres algo como esto?

Demo (un poco de espacio para su contenido, he usado margin allí, solo asegúrese de que se aplique a ambos, :before y :after así que si desea separar, declare el margen por separado para cada uno, ps - I he hecho los colores más claros)

/* 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;
}

Explicación: He usado :before y :after pseudo tener content: "" , por lo que crea un bloque, puede decir un bloque virtual dentro del elemento ... y que está más configurado para display: block , solo asegúrese de use el block allí block ya que los márgenes y la height no tendrán efecto ... y por último, pero no menos importante, estoy usando gradientes con rgba para controlar la alfa / opacidad del gradiente que se desvanecerá en ambos extremos

Answer 2

Puedes hacerlo con un separador también.

DEMO EN VIVO

.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;
}