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
}