Estoy usando border-radius y box-shadow para hacer un resplandor alrededor de un elemento.

Puedo quitar solamente la parte superior de la box-shadow?

Ejemplo en vivo

div {
    margin-top: 25px;
    color: #fff;
    height: 45px;
    margin-top: -5px;
    z-index: -10;
    padding: 26px 24px 46px;
    font-weight: normal;
    background: #000; /*#fff;*/
    border-top: 0px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    -webkit-border-radius: 3px;
     -khtml-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
     -khtml-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
       -moz-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
            box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
}

Edit: esta pequeña cosita es el problema!
¿Cómo puedo eliminar solamente la parte superior de una caja de sombra?

  • tu css está trabajando
  • Aquí está una subsidiaria de unproffesional y feo solución que debe ser utilizado por nadie, y funciona: jsfiddle.net/kL8tR/55 sólo me escondí la parte superior de la frontera en virtud de una posición absoluta negro elemento.
  • No es la que cubre toda la parte superior de la frontera. En la gran pantalla – sólo la mitad de ella.
InformationsquelleAutor Bakudan | 2011-08-11

6 Comentarios

  1. 11

    Funciona esto, pero voy a admitir que no saber si hay una mejor manera (o si es posible sin la adición de un elemento contenedor). El uso de múltiples box-shadows, sería una buena idea, pero me parece que no puede hacer el mismo aspecto.

    Ver: http://jsfiddle.net/thirtydot/8qEUc/3/

    HTML:

    <div id="bla">
        <div> something </div>
    </div>

    CSS:

    #bla {
        overflow-y: hidden;
        padding: 0 10px 10px 10px;
        margin: 0 -10px
    }
    #bla > div {
        /* the CSS from your question here */
    }
    • +1 porque funciona bien, aunque me sorprende no es puro css manera de hacer esto de forma consistente.
    • Creo que @guizí la solución consigue exactamente el mismo efecto más elegante que este y que es puro CSS. Darle un vistazo.
    • Winslow: Sí, @kizu la solución de (+1) y sus variaciones en ella son, definitivamente, más cerca que las otras respuestas. Sin embargo, no son «perfectos» como el mío (aunque, obviamente, la mina ha horrible HTML, y tiene la desventaja de atornillar con margin). Comparación: i.stack.imgur.com/89In6.png. Probablemente estoy siendo demasiado exigente, y a menudo no tiene que trabajar en un gradiente (o variable) de fondo.
    • Winslow: Sorprendentemente suficiente, me di cuenta de que algo anda mal con mi propia respuesta – en Firefox es la de cortar la sombra demasiado temprano. Afortunadamente, esto puede ser fácilmente fijado por el ajuste de la 5px número. Eso es lo que me pasa por no probar con Firefox espalda cuando he publicado mi respuesta!
  2. 12

    Ya que el uso de box-shadow, puede utilizar el pseudo-elemento para crear y colocar debajo del div, colocándolo de manera que sólo las partes necesarias sería visible: http://jsfiddle.net/kL8tR/60/

    Hay algunas notas importantes:

    • El pseudo-elemento debe tener z-index: -1
    • El div debe tener position: relative y no z-index

    Pseudo-elementos + CSS3 = pavor 🙂

  3. 8

    @milo; no es su borde superior es un shadow que se da en el código

    para la eliminación de la parte superior resplandor usted tiene que definir el espaciado vertical de la sombra.

    De escribir esto en tu sombra css:

    box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
    -moz-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
    -webkit-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
    -khtml-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;

    & tu puede generar a partir de aquí http://css3generator.com/

    NOTA: hay cuatro propiedades de la sombra son horizontal, vertical, blur & spread
    para el interior de la sombra puede definir inset para que

    • jsfiddle.net/thirtydot/kL8tR/59. Eso es probablemente lo suficientemente cerca, pero no es perfecto. La parte superior de la box-shadow es todavía poco visible, y las esquinas redondeadas en la parte superior no muy mira a la derecha (en Chrome, al menos).
  4. 1

    Usted puede intentar el siguiente. Mi método sólo utiliza CSS.

    Ejemplo De Enlace : http://jsfiddle.net/kL8tR/56/

    div{
        margin-top: 25px;
        color: #fff;
        height: 45px;
    
        padding: 26px 24px 46px;
    
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        border-top: none;
    
        -moz-box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);
        -webkit-box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);
        box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);
    
    }

    Básicamente lo que estoy haciendo, me estoy creando multi-capa de las sombras, así que la primera sombra superposiciones de la segunda capa, de enmascarar la parte superior de la sección.

    He utilizado esto, aquí está mi referencia :

    Mirar debajo de la sección de Capas múltiples sombras [ http://www.css3.info/preview/box-shadow/ ]

    • Que se ve perfecto sobre un fondo sólido, pero no tan bueno de otra manera: jsfiddle.net/thirtydot/kL8tR/58
    • +1, ya que funciona en este escenario. Aunque como @thirtydot dice, es bastante limitado, dado que el fondo debe ser de un color sólido.
    • Uberstein ¿por qué quitar la radio frontera?!?
    • La pregunta era Cómo quitar la parte superior de la frontera, que era mi objetivo principal. [Por CIERTO, no hay necesidad de voto de mi respuesta]
  5. 1

    sólo podría desplazar la sombra más abajo (desplazamiento vertical) y reducir la sombra de la radio, algo a lo largo de las líneas de (reemplazar el asterisco con la cantidad de píxeles necesarios para sólo cubrir la parte superior de la sombra con el mismo cuadro):

    box-shadow: 0 *px 10px 0 rgba(200,200,200,0.7);
    • además, todos los css con nada realmente complicado
  6. 0

    Si utiliza un negativo de radio de expansión y calibrar los otros parámetros para adaptarse a lo que buscas debe darle el efecto deseado.

    CSS Cuadro Sombra Negativa Radio Propagación

    CSS:

    div {
      height: 100px;
      width: 100px;
      border: solid 1px black;
      -webkit-box-shadow: 5px 5px 10px -6px black;
      -moz-box-shadow: 5px 5px 10px -6px black;
      box-shadow: 5px 5px 10px -6px black;
    }

    HTML:

    <div></div>

Dejar respuesta

Please enter your comment!
Please enter your name here