CSS3 - 圆角样式
作者:hangge | 2015-10-29 11:33
1,使用border-radius设置圆角(支持像素和百分比)
2,border-radius还可以设置4个值,分别对应4个圆角
3,还可以把圆角拉成椭圆角
这个需要单独设置每一个角,并且每个角提供两个值:水平半径和垂直半径
<style>
.box1 {
background: green;
border-radius: 20px;
}
</style>
<div class="box1" style="width:200px;height:100px">
</div>
2,border-radius还可以设置4个值,分别对应4个圆角
<style>
.box1 {
background: green;
border-radius: 20px 15px 10px 5px;
}
</style>
<div class="box1" style="width:200px;height:100px">
</div>
3,还可以把圆角拉成椭圆角
这个需要单独设置每一个角,并且每个角提供两个值:水平半径和垂直半径
<style>
.box1 {
background: green;
border-top-left-radius:100px 30px;
border-top-right-radius:100px 30px;
}
</style>
<div class="box1" style="width:200px;height:100px">
</div>
全部评论(0)