CSS3 - 圆角样式

2015-10-29 发布：hangge 阅读：436

1，使用border-radius设置圆角（支持像素和百分比）

<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>