borde redondeado de la caja css
Método de configuración:
css3 proporciona la declaración
border-radius: 25px / 50%;
set
border-radius: 25px 20px 10px 15px
pueden ser parámetros o porcentajes específicos.
Aplicación especial:
-
Caja redonda:
a. La longitud y el ancho de la caja son iguales
b. El radio del borde es la mitad del ancho de la caja -
El
radio del borde del cuadro ovalado es la mitad del ancho del cuadro
Visualización de código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角边框</title>
<style>
.div0 {
height: 50px;
width: 50px;
background-color: black;
margin: 0 auto;
}
.div1 {
height: 50px;
width: 50px;
background-color: black;
/* border-radius: 25px; */
/* 直接具体数值 */
border-radius: 50%;
/* 宽度的一半 */
margin: 0 auto;
}
.div2 {
height: 50px;
width: 100px;
background-color: black;
border-radius: 25px;
/* 直接具体数值 */
/* border-radius: 50%; */
/* 宽度的一半 */
margin: 0 auto;
}
* {
margin: 0px;
/* 清除自带的外边距 */
padding: 0px;
/* 清除自带的内边距 */
}
</style>
</head>
<body>
<div>
<div class="div0"></div>
<br/>
<div class="div1"></div>
<br/>
<div class="div2"></div>
<br/>
</div>
</body>
</html>
Visualización de la página web:
