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
}