box shadow con border radius
<style>
div {border: solid black 2px;
margin:20px;
width:200px;
height:200px;
padding:10px;
border-radius:10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
</style>
<div>
hola mundo
</div>
veamos todo el css:
1) margin para que tenga margenes de separacion
2) width: para definir el ancho del contenedor
3) height: para definir el alto del contenedor
4) paddin: para espacio de separacion interna alejado de los bordes si se agrega texto o
imagenes dentro del contenedor tendra esa separacion del borde
5) border: aqui para que tenga borde el contenedor;
hasta aqui las propiedades basicas css de un contenedor,
ahora veamos la sombra:
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
primero demos teoria la sombra puede ser:
a) uniforme: que se extienda desde los 4 bordes
b) enfocada: osea que supongamos la luz al objeto lo ilumina desde arriba izquiera
entonces no hay sombra arriba ni lateral izquierdo
pero si hay sombra abajo y lateral derecho
Comentarios
Publicar un comentario