css3- border

css3-border

1.border-color

2.border-image

3.border-radius (  none | <length>{1,4} [ / <length>{1,4} ]? )

• 第一个值是水平半径。
• 如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。
• 如果任意一个值为0，则这个角是矩形，不会是圆的。
• 值不允许是负值。

4.box-shadow

demo:

html:

<div class="wrap">
    <div class="box">
        <div class="box">
           练习css3中的border。
      </div>
    </div>
</div>

css3:

.wrap{
	background-color:#09F;
	padding:30px;
	width:400px;
	text-align:center;
	margin:20px auto;
	border-radius:30px 100px / 90px 25px 90px 11px;
}

.box{
	padding:10px;
	background-color:#fff;
	color:#C30;
	display:inline-block;

	border:5px solid #fff;
	border-radius:255px 20px 225px 20px / 20px 225px 20px 255px;
	position:relative;
	box-shadow:2px 3px 2px #000;
}

.box .box{
	width:100px;
	border-color:#9C9;
	padding:30px;
	box-shadow:1px 1px 1px #000;
}
.box:before{
	content:"";
	border:20px solid #000;
	border-width:0 30px 15px 0;
	border-color:transparent #fff;
	position:absolute;
	bottom:-15px;
	left:50px;

}
.box .box:before{
	border-color:transparent #9c9;
	left:31px;
	bottom:-20px
}