Usando la propiedad border-radius de CSS3, puede hacer "esquinas redondeadas" para cualquier elemento. Con la propiedad border-radius, puede usar las siguientes reglas:
(1) Cuatro valores: el primer valor es la esquina superior izquierda, el segundo valor es la esquina superior derecha, el tercer valor es la esquina inferior derecha y el cuarto valor es la esquina inferior izquierda (2) Tres valores: el primero El valor es la esquina superior izquierda, el segundo valor es la esquina superior derecha y la esquina inferior izquierda, el tercer valor es la esquina inferior derecha (3) Dos valores: el primer valor es la esquina superior izquierda y la esquina inferior derecha, el el segundo valor es la esquina superior derecha y la esquina inferior izquierda (4) Un valor: los cuatro valores de filete son iguales
Si desea que los gráficos tengan un efecto de esquinas redondeadas, sólo necesita agregar un atributo, el atributo de radio de borde. Si quieres que quede muy redondo, aumenta este valor.
<!DOCTYPE html>
<html>
<cabeza>
<meta juego de caracteres="UTF-8">
<título>Página de inicio</título>
<estilo>
div{
ancho: 100px;
altura: 100 píxeles;
color de fondo: rgb(151, 26, 49);
radio del borde: 10px;
}
img{
ancho: 100px;
altura: 100 píxeles;
radio del borde: 10px;
}
</estilo>
</cabeza>
<cuerpo>
<div>
<img src="../vue/1.jpg">
</div>
</cuerpo>
</html>Si quieres que sea redondo, escribe 100%.
efecto de sombra de sombra de caja
margen: 0 auto: no es necesario controlar la parte superior e inferior. Auto permite que los espacios izquierdo y derecho se distribuyan uniformemente y luego coloca el cuadro en el medio. Permitir que los espacios entre los espacios izquierdo y derecho se distribuyan uniformemente es lo que hace el automóvil.
0 significa que no hay sombra en la dirección horizontal, el segundo 0 significa que no hay sombra en la dirección vertical y el tercero es el desenfoque de la sombra.
<!DOCTYPE html>
<html>
<cabeza>
<meta juego de caracteres="UTF-8">
<título>Página de inicio</título>
<enlace href="" tipo="texto/css" rel="hoja de estilo"/>
<tipo de estilo="texto/css">
div{
ancho: 500 px;
altura: 500 px;
color de fondo: verdeamarillo;
margen: 0 automático;
sombra de cuadro: 0 0 50px rgba(0, 0, 0, 0.5);
}
</estilo>
</cabeza>
<cuerpo>
<div clase="d1">
</div>
</cuerpo>
</html>Con esto concluye este artículo sobre las nuevas características de CSS3, efecto de sombra de cuadro y radio de borde redondeado. Para obtener más información sobre la nueva característica de CSS3, busque artículos anteriores en downcodes.com o continúe navegando por los artículos relacionados a continuación. ¡Apoyarás más a downcodes.com en el futuro!