css3- border

时间:2024-04-27 22:37:11

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
}