Estoy tratando de lograr algo que ni siquiera estoy seguro de que sea posible aquí.calc() 100% + #px
Estoy tratando de colocar una imagen particular de PNG sombra bajo el navegador de mi sitio. Sin embargo, también quiero reutilizar esta capacidad para cualquier objeto que desee en el sitio, ya sea una imagen, un div o un botón. Básicamente usa la misma imagen de sombra para cualquier objeto.
Usando la función css3 calc() Estoy intentando hacer la altura del objeto @ 100% + 25px (altura de png). estilo
que he intentado:
height: -webkit-calc(100% + 25px);
height: -moz-calc(100% + 25px);
height: -o-calc(100% + 25px);
Pero por lo que he entendido en Firebug 100% + 25 píxeles es entonces el nuevo 100%, ya que no logra nada.
También probé:
height: -webkit-calc(100% + 25px);
height: -moz-calc(100% + 25px);
height: -o-calc(100% + 25px);
background-position: 0 -moz-calc(100% + 25px);
Pero no hay alegría aquí tampoco.
Si utilizo calc (3em + 25px); no funciona, pero esto no es lo suficientemente flexible como para trabajar en cualquier objeto.
¿Esto es posible? ¿Estoy teniendo sentido?
'-moz-box-shadow: 0 0 30px 5px # 999; -webkit-box-shadow: 0 0 30px 5px # 999; ' ¿No funcionará mejor? – TheGeekZn
Muchas gracias, sin embargo, esta es una imagen específica que estoy usando para una sombra paralela curvada. Ya había hecho uso de la sombra de caja como propiedad de CSS, sin embargo, no es el efecto que busco. – user1597713
Si entiendo bien, use 'border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; ' para crear esquinas curvas. La sombra seguirá eso. – TheGeekZn