前端知识点 --- border-Radius的四个角(css)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>border-radius示例</title>
<style>
.box {
width: 200px;
height: 150px;
background-color: #4CAF50;
border-radius: 20% 5% 20% 5% / 5% 20% 5% 20%;
border-radius: 20%/;
}
</style>
</head>
<body>
<!-- border-radius: [水平半径] / [垂直半径]; -->
<h2>带有不同水平和垂直圆角的示例</h2>
<div class="box"></div>
</body>
</html>
20% 5% 20% 5% / 5% 20% 5% 20%
前四个值是分别针对水平半径和竖直半径的顺序设置：
左上角：水平半径20%，竖直半径5%
右上角：水平半径5%，竖直半径20%
右下角：水平半径20%，竖直半径5%
左下角：水平半径5%，竖直半径20%