1/4圆 :
.bottom-right{
width: 40px;
height: 40px;
background: yellow;
border-radius: 40px 0 0 0 ;
}
设置元素的border-radius 属性 第一个值和元素的宽高相同 后三个 为0,即可得到以顺时针为方向的第一个1/4圆
border-radius: 40px 0 0 0 ;
以此类推 设置 第二个值与元素的宽高相同 可得到顺时针方向第二个1/4圆
border-radius: 0 40px 0 0 ;
border-radius: 0 0 40px 0 ;
border-radius: 0 0 0 40px ;
半圆:
上半圆
.top {
width: 100px;/*宽度为高度的2倍*/
height: 50px;
border-radius: 50px 50px 0 0;/*圆角半径为高度的值*/
}
右半圆
.right {
height: 100px;/*高度为宽度的2倍*/
width: 50px;
border-radius: 0 50px 50px 0;/*圆角半径为宽度的值*/
}
底半圆
.bottom {
width: 100px;/*宽度为高度的2倍*/
height: 50px;
border-radius: 0 0 50px 50px;/*圆角半径为高度的值*/
}
左半圆
.left {
width: 50px;
height: 100px;/*高度为宽度的2倍*/
border-radius: 50px 0 0 50px;/*圆角半径为宽度的值*/
}