css3新属性-圆角效果
福叔 2014-12-24
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 0喜欢 / 0评论 2020-09-11
云端漂移 0喜欢 / 0评论 2020-07-06
MaureenChen 0喜欢 / 0评论 2020-02-17
bertzhang 0喜欢 / 0评论 2020-01-31
impress 0喜欢 / 0评论 2020-01-11
MaureenChen 0喜欢 / 0评论 2020-01-10
impress 0喜欢 / 0评论 2019-12-31
zhanghao 0喜欢 / 0评论 2019-12-20
zengni 0喜欢 / 0评论 2019-12-18
zhanghao 0喜欢 / 0评论 2019-12-12
didianmanong 0喜欢 / 0评论 2019-11-17
impress 0喜欢 / 0评论 2019-11-05
MaureenChen 0喜欢 / 0评论 2019-11-03
echoes 0喜欢 / 0评论 2019-11-03
zhangruiweb 0喜欢 / 0评论 2019-11-01
绿豆饼 0喜欢 / 0评论 2019-10-20
Phoebe的学习天地 0喜欢 / 0评论 2015-11-12
王景迁 0喜欢 / 0评论 2019-09-07
懵懂听风雨 0喜欢 / 0评论 2018-09-27
yezi 0喜欢 / 0评论 2019-07-01
xzw 0喜欢 / 0评论 2019-06-30
zhanghaibing00 0喜欢 / 0评论 2017-10-17
nicepainkiller 0喜欢 / 0评论 2019-06-28
無為 0喜欢 / 0评论 2017-07-06
coulder 0喜欢 / 0评论 2019-06-28
jianqi 0喜欢 / 0评论 2019-06-28
xvzhengyang 0喜欢 / 0评论 2016-07-19
WEB前端娃steiny 0喜欢 / 0评论 2019-06-28
沉着前进 0喜欢 / 0评论 2019-06-28
zyhui 0喜欢 / 0评论 2016-02-14
魄竹 0喜欢 / 0评论 2016-01-17
walliam 0喜欢 / 0评论 2015-11-12
lanzhusiyu 0喜欢 / 0评论 2019-06-27
Alisa0 0喜欢 / 0评论 2019-06-27
王为仁 0喜欢 / 0评论 2015-06-09
walliam 0喜欢 / 0评论 2015-04-28
AnyBisks 0喜欢 / 0评论 2019-06-27
Phoebe的学习天地 0喜欢 / 0评论 2019-06-27
galilajiao00 0喜欢 / 0评论 2014-12-08
淡风wisdon大大 0喜欢 / 0评论 2014-11-27
wghou 0喜欢 / 0评论 2014-11-20
梦远青城 0喜欢 / 0评论 2014-11-11
無為 0喜欢 / 0评论 2014-05-09
icecoffeemzp 0喜欢 / 0评论 2014-04-17