用border-radius实现圆形/椭圆

圆形

借助border-radius

<style>
	.circle{
		width: 200px;
		height: 200px;
		background: yellowgreen;
		border-radius: 100px;
	}
</style>
<div class="circle"></div>

椭圆

借助 border-radius: ${x}px / ${y}px; （单独指定水平和垂直半径）

<style>
    .cricle {
        height: 200px;
        width: 150px;
        border-radius: 75px / 100px;
    }
</style>

<div class="circle"></div>

自适应圆/椭圆

借助border-raduis的值可以是百分比的形式

<style>
    .cricle {
        height: 200px;
        width: 150px;
        border-radius: 50% / 50%;
    }
</style>

<div class="circle"></div>

二分之一椭圆

借助border-radius值的另外一种写法

<style>
.half-circle{
	width: 200px;
    height: 200px;
    background: yellowgreen;
    border-radius: 50% / 100% 100% 0 0;
    border: 1px dashed;
}
</style>
<h3>二分之一椭圆</h3>
<div class="half-circle"></div>

四分之一椭圆

<style>
.half-circle{
	width: 200px;
    height: 200px;
    background: yellowgreen;
    border-radius: 100% 0 0;
    border: 1px dashed;
}
</style>
<h3>四分之一椭圆</h3>
<div class="half-circle"></div>