Question

如何利用css3实现半圆

Answer 1

div{

display: inline-block;

border:1px solid #6baabb;

width:40px;

height:40px;

float:left;

margin:0px 10px;

}

a{

display: inline-block;

width:40px;

height:40px;

background: #6baabb;

}

.Round{/*圆*/

border-radius:20px;

}

.LeftRound{/*左半圆*/

width:20px;

border-radius:20px 0px 0px 20px;

}

.RightRound{/*右半圆*/

width:20px;

border-radius:0px 20px 20px 0px;

}

.TopRound{/*上半圆*/

height:20px;

border-radius:20px 20px 0px 0px;

}

.BottomRound{/*下半圆*/

height:20px;

border-radius:0px 0px 20px 20px;

}

<div><a class="Round"></a></div> 全圆

<div><a class="LeftRound"></a></div> 左半圆

<div><a class="RightRound"></a></div> 右半圆

<div><a class="TopRound"></a></div> 上半圆

<div><a class="BottomRound"></a></div> 下半圆