css box rounded border
Setting method:
css3 provides the statement
border-radius: 25px/50%;
set
border-radius: 25px 20px 10px 15px
can be specific parameters or percentages.
Special application:
-
Round box:
a. The length and width of the box are the same
b.border-radius is half the width of the box -
The
border-radius of the oval box is half the width of the box
Code display:
<!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>
Web page display:
