簡介：
邊框
圓角
盒子陰影  
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