sombra - Usando border-radius y box-shadow juntos(CSS)

box-shadow examples

Question

Ok, sé que ninguna de estas propiedades son completamente compatibles todavía, pero las estoy usando de todos modos: P

Cuando agrego un radio de borde y una sombra de cuadro (con y sin prefijos de proveedor), el radio del radio de borde no es transparente para la sombra de cuadro. Ejemplo: http://cndg.us/3f41a0

¿Es posible arreglar esto? También he notado que -webkit-box-shadow tiene algunos problemas con divs ocultos.

Answer 1

Mientras buscaba en el sitio web de mi padre, descubrí que puedes agregar la característica del radio a la sombra. Así que tengo un calendario dentro de un div, ambos tienen bordes redondeados (0.7em para ser exactos) y quería agregarle una sombra paralela, pero casi siempre tienen un borde cuadrado y, como tal, chocan con mis bordes redondeados. ¿Simplemente, jugando con el atributo box-shadow y decidir qué hago si le agrego un radio? Así que lo hice. No puedo encontrar ningún lugar en línea que mencione esta técnica, así que podría haber descubierto algo único. De todos modos, basta con la historia aquí están los códigos:

CSS:

box-shadow-bottom-right-radius: 0.7em; //you can enter whatever value you want
box-shadow-bottom-left-radius: 0.7em;
box-shadow-top-right-radius: 0.7em;
box-shadow-top-left-radius: 0.7em;

Ahí lo tienes, así que estás agregando un radio a la sombra del cuadro como lo harías normalmente en un borde.

Answer 2

No, no es posible en este momento. Las dos propiedades realmente no juegan bien entre sí. Recomiendo usar CSS para las esquinas redondeadas y una solución basada en imágenes para la sombra paralela si DEBES tener esquinas redondeadas con una sombra paralela.

Answer 3

Para mesa con celdas:

JSFiddle

HTML

<table>
    <tr>
        <td class=''one''>One</td>
        <td class=''two''>Two</td>
    </tr>
    <tr>
        <td colspan="2" class=''three''>Three</td>
    </tr>
</table>

CSS

body {
 font-family: ''Helvetica Neue'', Helvetica, Arial, sans-serif;
 padding: 100px;
 background: pink;
}

table {
/* basic */
 background-color: #fff;
 margin: 0 auto;
 width: 200px;
 padding: 100px;
 text-align: center;
/* border-radius */
 border-radius: 20px;
/* box-shadow */
 box-shadow: rgba(0,0,0,0.8) 0 0 10px;
 border-collapse: collapse;
}

table td{
  color: white;
}

td.one{
    border-radius: 20px 0 0 0;
    background-color: black;
}
td.two{
    border-radius: 0 20px 0 0;
    background-color: darkgreen;
}
td.three{
    border-radius: 0 0 20px 20px;
    background-color: darkred;
}

Answer 4

es posible consultar aquí: http://jsfiddle.net/Zw4QA/1/

Creo que tienes un elemento dentro de tu div con los corders redondeados. Tienes que aplicar las esquinas a este elemento. En este momento, las esquinas redondeadas en el elemento padre no se aplicarán a los hijos a menos que usted lo especifique en su CSS.

Para más magia CSS3 verifique este enlace: http://css3please.com/

Tenga en cuenta que cada navegador tiene su propia forma de manejar Sombras y radio de borde http://thany.nl/apps/boxshadows/