使用css3中的圆角边框实现如下效果

使用css3中的圆角边框实现如下效果

html:

<div id="box"></div>

css:

<style type="text/css">
	#box{
		width: 500px;
		height: 400px;
		margin: 100px auto 0;
		border: 1px solid #2D2023;
		background-color: pink;
		border-top-left-radius: 20px;
		border-top-right-radius: 100px;
		border-bottom-right-radius: 150px;
		border-bottom-left-radius: 100px;
	}
</style>

css:

#box2{
	width: 500px;
	height: 500px;
	margin: 100px auto 100px;
	border: 1px solid #2D2023;
	background-color: pink;
	border-top-left-radius: 250px;
	border-top-right-radius: 250px;
	border-bottom-right-radius: 250px;
	border-bottom-left-radius: 250px;
}

border-top-left-radius：左上角

border-top-right-radius：右上角

border-bottom-left-radius：左下角

border-bottom-right-radius：右下角

border-top-left-radius属性可以设置两个属性值或只设置一个属性值。

当设置两个属性值时：第一个属性值表示左上角形状的水平半径，第二个属性值表示左上角形状的垂直半径；

当只设置一个属性值时：该属性值即表示左上角形状的水平半径又表示左上角形状的垂直半径。

border-bottom-right-radius属性是用来定义右下角边框的形状。

border-bottom-right-radius属性可以有两个属性值。

第一个属性值是水平半径，第二个属性值是垂直半径。

如果不定义第二个属性值，则第二个属性值和第一个属性值相同，就是垂直半径和水平半径相同。

html:

<div class="send">
	<div class="arrow"></div>
</div>

css:

<style type="text/css">
	body{
		background-color: #4d4948;
	}
	.send{
		width: 350px;
		height: 45px;
		background-color: #f8c301;
		border-radius: 5px;
		margin: 30px auto 0;
		position: relative;
	}
	.send .arrow{
		width: 0;
		height: 0;
		font-size: 0;
		border: 8px solid #4d4948;
		position: absolute;
		top: 5px;
		right: -16px;
		border-top-color: #4d4948;
		border-right-color: #4d4948;
		border-bottom-color: #4d4948;
		border-left-color: #f8c301;
	}
</style>

css3圆形

圆环

半圆

四分之一圆

四分之一扇形