圆角边框
border-radius:length;
效果显示
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
div {
display: inline-block;
margin-top: 20px;
margin-left: 30px;
background-color: pink;
}
.div1 {
/* 圆角边框,用半径为10px的圆,切原有的矩形 */
border-radius: 10px;
height: 100px;
width: 200px;
}
.div2 {
/* border-radius的值也可为百分比,当切角圆的
半径为正方形的一半时,显示为圆形 */
border-radius: 50%;
height: 100px;
width: 100px;
}
.div3 {
/*圆的半径为高度的一半 */
border-radius: 60px;
height: 100px;
width: 200px;
}
.div4 {
/*依次设置不同的角 */
border-radius: 10px 20px 40px 80px;
height: 100px;
width: 200px;
}
.div5 {
/*只有两个值,为对角线关系 */
border-radius: 40px 10px;
height: 100px;
width: 200px;
}
.div6 {
/*单独设一个角,top与left的顺序不能变 */
border-top-left-radius: 20px;
height: 100px;
width: 200px;
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</body>
</html>