2.8-边框和圆角

边框

border: 1px solid  red;

      线宽度    线型   线的颜色

线型：solid --实线

          dashed--虚线

          dotted--点状线 

小属性	意义
border-width	线宽
border-style	线型
border-color	线颜色

去掉边框 border：none

圆角

1、border-radius属性的值通常为px单位，表示圆角的半径

border-radius：10px

border-radius：宽度的一半，则为正圆形

2、单独设置四个圆角

border-radius属性可以单独设置四个圆角

border-radius：10px    20px    30px  40px；

                           左上角  右上角  右下角  左下角

注意：小属性，小属性是为了层叠大属性

3、百分比为单位

border-radius属性的值也可以用百分比做单位，表示圆角起始于每条边的哪里

正方形盒子如果设置的border-radius属性为50%，就是正圆形

长方形盒子如果设置的border-radius属性为50%，就是椭圆形

注意：

border-radius：左上角、右下角/右上角、左下角（两个值）

border-radius:左上角  右上角/左下角  右下角（三个值）

border-radius:左上角 右上角 右下角 左下角（四个值）

盒子阴影

1、box-shadow: 10px  20px   30px    rgba(0,0,0,.4)；

                      x偏移  y偏移  模糊量  颜色

2、阴影延展--同时向四个方向进行延展

box-shadow: 10px  20px   30px   40px  rgba(0,0,0,.4)；

                      x偏移  y偏移  模糊量  阴影延展  颜色

3、内阴影

box-shadow属性值前面加inset单词，表示内阴影

box-shadow: inset 10px  20px   30px   40px  rgba(0,0,0,.4)；

                      内阴影 x偏移  y偏移  模糊量  阴影延展  颜色

多阴影