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

Entradas más populares de este blog

simulacion de oferta de trabajo

Flexbox clase 1

reflexion del frontend