如何利用css3实现半圆

html-css087

如何利用css3实现半圆,第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> 下半圆

<div style="border:1px solid #e6e6e6width:50pxheight:25pxborder-top-right-radius: 25pxborder-top-left-radius: 25pxborder-bottom:0">

</div>