css盒子圆角边框
设置方法：
css3提供语句
border-radius: 25px/50%;
分开设置
border-radius: 25px 20px 10px 15px
可以是具体参数或者百分比。
特殊应用：
-
圆形盒子：
a.盒子的长宽相同
b.border-radius是盒子的宽度一半 -
椭圆盒子
border-radius是盒子的宽度一半
代码显示：
<!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>
网页显示：
