css 边框设置

Css  border 边框

(1) box-sizing

1) box-sizing : border-box;

（height:200px;width:200px;  border: 3px #FAE6DD solid ;）

 

 

Border的长宽直接算入整个div的长宽里。

 

2) box-sizing : content-box;

（height:200px;width:200px; border: 3px #FAE6DD solid ;）

 

整个div的长宽之外绘制元素的内边距和边框。

3）inherit继承父元素box-sizing属性的值；

 

(2) box-shadow：h-shadow v-shadow blur spread color inset

box-shadow: (绘制多层边框)

   0 0 0 8px #E50086,

   0 0 0 18px #DB7BA9,

   0 0 0 28px #F499C2;

 

(3) border-radius ;

改变多层边框，方形变圆形（多层边框的贴合度很棒）

border-radius： 100%;

 

 

 

(4) Outline ：不能贴合弧形

 

       border-radius:100%;

outline:#00ff00 solid 15px;

（之前看到outline 可以设置负值，但是试了下不行诶！）