css3新属性-圆角效果
border-radius是向元素添加圆角边框。
border-radius的值能用px单位，还可以用百分比或者em，但兼容性目前还不太好。
/* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */
<body> <div class="circle"> </div> <br/> <!--任务部分--> <div class="semi-circle2"> </div> <br/> <div class="semi-circle"> </div> </body>
实心圆：
方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码：
div{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}实心上半圆：
方法：把宽度（width）设为高度(height)的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。
div.semi-circle{
height:50px;/*是width的一半*/
width:100px;
background:#9da;
border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
}实心左半圆：
方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和左下角的半径与元素的高度一致（大于也是可以的）。
div.semi-circle2{
height:100px;/*是width的一倍*/
width:50px;
background:#9da;
border-radius:50px 0 0 50px;/*半径至少设置为weight的值*/
} 
相关推荐
momode 2020-09-11
云端漂移 2020-07-06
MaureenChen 2020-02-17
bertzhang 2020-01-31
impress 2020-01-11
MaureenChen 2020-01-10
impress 2019-12-31
zhanghao 2019-12-20
zengni 2019-12-18
zhanghao 2019-12-12
didianmanong 2019-11-17
impress 2019-11-05
MaureenChen 2019-11-03
echoes 2019-11-03
zhangruiweb 2019-11-01
绿豆饼 2019-10-20
Phoebe的学习天地 2015-11-12
王景迁 2019-09-07