【前言】
本文简单介绍下实现半圆、1/4圆的几种方案
【主体】
(1)半圆
实现原理:border两个方向的值的设定
1、下半圆
<div class="area"></div>
.area{
width: 100px;
height: 50px;
background: red;
border-radius: 0px 0px 100px 100px;
}
2、上半圆
3、左半圆
4、右半圆
(2)1/4圆
实现原理:border四个方向的值的设定---上右下左
1、左上角1/4圆
<div class="area"></div>
.area{
width: 100px;
height: 100px;
background: red;
border-radius: 100px 0px 0px 0px;
margin: 10px;
}
2、右上角border-radius: 0px 100px 0px 0px;
3、左下角border-radius: 0px 0px 100px 0px;
4、右下角border-radius: 0px 0px 0px 100px;
今天先写到这里,稍后继续
.