CSS实现椭圆
2020-02-13 本文已影响0人
再见噜噜班
背景知识：border-radius
对于border-radius，有一个鲜为人知的知识点：它可以单独指定水平和垂直半径，只要用一个斜杠（/）分隔开就可以。实现椭圆就要用到这一点。
- 全椭圆
以椭圆左上角为例，可以得到以下分析：
椭圆左上角分析.png
举一反三，其他三个角的水平半径和垂直半径都是高度或者宽度的50%。转换为css代码，即
border-radius:50% 50% 50% 50% / 50% 50% 50% 50%(顺序：左上角，右上角，右下角，左下角，顺时针方向)，简写border-radius:50% / 50%,再简写border-radius:50%2.半椭圆
以椭圆的上半个椭圆的左上角为例，可以得到以下分析：
半椭圆左上角分析.png
同样的方法，可以知道四个角的水平和垂直半径分别为
50%/100%,50%/100%,0/0,0/0,即border-radius:50% 50% 0 0 /100% 100% 0 0
四分之一椭圆也可以用同样的方法来实现，就不再赘述，以下贴上全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>椭圆</title>
<style>
div{
margin:50px;
}
.ovals{
width:200px;
height: 100px;
border-radius: 50%;
background: lightcoral;
}
.half-top-ovals{
width:200px;
height: 100px;
background: lightcoral;
border-radius: 50% 50% 0 0 / 100% 100% 0 0 ;
}
.half-left-ovals{
width:200px;
height: 100px;
background: lightcoral;
border-radius: 100% 0 0 100% / 50% 0 0 50%;
}
.quarter-top-left-ovals{
width:200px;
height: 100px;
background: lightcoral;
border-radius: 100% 0 0 0/ 100% 0 0 0;
}
</style>
</head>
<body>
<div class="ovals"></div>
<div class='half-top-ovals'></div>
<div class='half-left-ovals'></div>
<div class='quarter-top-left-ovals'></div>
</body>
</html>
效果：
所有效果.jpg
