简介：
边框
圆角
盒子阴影  
2.1  边框的三要素
border属性
border:   1px  solid  red;（分别是线宽度，线型，线颜色）

线型：
值            意义 
solid        实线
dashed    虚线
dotted    点状线

边框三要素可以拆分为小属性：（小属性是为了可以层叠大属性，即在整体已经设置了颜色基础上，选择个别的层叠新颜色）
border-width    线宽
border-style     线型
border-color    线颜色  
2.2  四个方向的边框
属性                    意义
border-top         上边框
border-right       右边框
border-bottom   下边框
border-left          左边框

四个方向边框的三要素小属性：（也是专门用来层叠大属性）
属性
border-top-width    上边框宽度
border-top-style     上边框线型
border-top-color     上边框颜色
同理，还有右/下/左边框......

去掉边框：
border-left:none;   去掉左边框，以此类推

巧妙利用边框制作三角形
原理：盒子的宽度高度都是0，只有一条边框有颜色，其余都是透明；其中边框的宽度就是三角形的底边长。
.box1 {
          width:0;
          height:0;
          /*transparent是透明色*/
          border: 20px  solid  transparent;
          border-top-color: red;
}  
2.3  圆角
border-radius 属性（属性值通常为ps单位，表示圆角的半径） 比如  border-radius:10px;  （这个数值越大，表示圆的程度越大）
正圆形：正方形盒子，当border-radius的属性值为正方形盒子宽度的一半
胶囊型：长方形盒子，当border-radius的属性值为长方形盒子宽度的一半

单独设置四个圆角
方法①border-radius: 10px  20px  30px  40px;（分别表示左上、右上、右下、左下）
方法②也可以使用小属性，border-top-left-radius   左上角
                                           border-top-right-radius  右上角
                                           border-bottom-left-radius  左下角
                                           border-bottom-right-radius  右下角


border-radius 属性值也可以用百分比做单位，表示圆角起始于每条边的哪里
比如  border-radius:20%;
正圆形：正方形盒子，当border-radius属性值为50%
椭圆形：长方形盒子，当border-radius属性值为50%  
2.4 盒子阴影
box-shadow属性
box-shadow:  10px  20px  30px  rgba(0,0,0,.4);（分别表示x偏移，y偏移，模糊量，颜色）
如果参数是五个数值，
box-shadow:  10px  20px  30px  40px  rgba(0,0,0,.4);（分别表示x偏移，y偏移，模糊量，延展值，颜色）
延展值越大，阴影会同时向四个方向延展越大

内阴影
box-shadow:  inset  10px  20px  30px  40px  rgba(0,0,0,.4);（分别表示内阴影，x偏移，y偏移，模糊量，延展值，颜色）  
应用上：比如电子商城里面，鼠标触摸一个盒子，这个盒子内部就会发白光。

多阴影
box-shadow属性值可以用逗号隔开多个，表示多个阴影
box-shadow:  2px  2px  30px  red,  4px  4px  40px  blue,  6px  6px  6px  50px  green,  inset  6px  6px  6px  orange;

  3.1 小结
重点：
1. 边框有哪三个要素？如何分别设置三个要素？常用线型有哪几种？
边框三要素：border-width,border-style,border-color
如何设置三要素：
常用线型有：solid实线，dashed虚线，dotted点状线
边框可以合写，比如  border:  1px  solid  red;
也可以分别设置四个方向的边框，比如  border  top/  border  right/  border  bottom/  border  left
也可以单独设置某个方向的小属性，比如  border-left-color设置左边框颜色，border-bottom-style设置下边框线型

2. 圆角如何设置？正圆形如何设置？
圆角使用border-radius属性设置，圆角以圆角半径px设置，或者用百分比设置
正圆形：正方形盒子，当border-radius属性值为50%

3. 阴影如何设置？
阴影使用box-shadow属性设置，属性值分别表示水平方向的位移，垂直方向的位移，模糊程度，延展程度，颜色

难点：
1. 如何用盒子制作三角形？
原理是：相邻的边是不一样的颜色，边的交界处会形成一条斜线
把盒子的宽度和高度都设置为0，其余不需要的边框都设置成透明色transparent