2、这时需要去除浏览器中一些特有的样式。
3、给这个样式一个宽高,并添加一个背景。
4、最后给样式添加border-radius属性,其值为宽或高的一半。
5、最后运行程序,这样就会在界面中看到一个圆形。
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>