前言：這是筆者學習之后自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！
border 的組合寫法
border：border-width border-style border-color;
- border-width：邊框寬度，不能為百分比，因為不會根據設備寬度改變；同理，outline | text-shadow | box-shadow 也不可以；
- border-style：邊框樣式，一般用 solid 多一點，dashed（虛線）、dotted（點狀線）也有；
- border-color：邊框顏色，默認顏色是元素的文本顏色，如果沒有設置，那就從父元素繼承文本顏色；
邊框可以根據方向單獨設置，上下左右，border-top | border-bottom | border-left | border-right ;
所以屬性也可以單獨設置，border-top-width | border-top-style | border-top-color ;
單屬性也可以有組合寫法：
- border-width:上 右 下 左；（順時針方向）
- border-width:上 左右 下；
- border-width:上下 左右 ；
- border-width:四個方向；
- border-style | border-color也可以這樣設置；
還可以根據方向來用組合寫法：
- border-left : 邊框寬度 邊框樣式 邊框顏色；
用 border 做圖形
邊框的交界處是斜線，大師們用這個特性做出了三角形，配合其他屬性，可以做出各種圖形；
原理就是：控制四個方向的邊框顏色，就可以做出三角形。再控制寬度，就可以做出各種不同的鈍角、銳角三角形；
.triangle { border-style: solid; border-width: 30px 50px 60px 80px; /*我們可以控制各方向邊框的寬度，做出各種不同的三角形*/ border-color: #f00 #0f0 #00f #0ff; /*四個方向的顏色自由設置，當設置其他三個方向或兩個方向的顏色為transparent(透明色)時，另一方向就成了一個三角形*/ width: 0; /*盒子寬度為0，四個方向的border寬度一致，可以用border做正方形*/ margin: 100px; }
我比較喜歡根據方向來寫三角形，這樣容易理解：
.triangle { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #0ff; /*我們一般根據方向來寫三角形，這樣容易記憶；箭頭指向的反方向的顏色設置為你想要的，然后箭頭方向不要寫，另外兩個方向的顏色設置為transperent透明*/ }
小三角的陰影
三角形做出來了，但是當我們給元素定義一個 box-shadow，會出現如下情況：
如果不想要陰影，很好解決，刪掉三角形的 box-shadow 就好了；
而在實際應用中，我們很多情況下是需要陰影的，只是陰影出現在三角形的兩條邊上，下圖給容器設置了陰影；
方法一：
我們可以在加一個元素，也寫成三角形，設置層級比箭頭和容器元素都小，並且設置濾鏡，位置比箭頭稍高，露出邊緣部分就可以了；
當我們把之前的箭頭刪掉，就是如右圖：
完成品：
PS：濾鏡也有兼容性問題，建議用谷歌瀏覽器測試；
<style type="text/css"> .note { margin: 100px; width: 200px; height: 80px; background: #f60; position: relative; border-radius: 5px; box-shadow: 0 0 10px 0px #000; /*水平偏移---垂直偏移---模糊度---擴張半徑---顏色*/ } .triangle { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #f60; /*我們一般根據方向來寫三角形，這樣容易記憶；箭頭指向的反方向的顏色設置為你想要的，然后箭頭方向不要寫，另外兩個方向的顏色設置為transperent透明*/ position: absolute; top: -10px; left: 50%; margin-left: -10px; } .filter { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #000; position: absolute; top: -10px; left: 50%; margin-left: -10px; z-index: -1; filter: blur(2px); /*這又設計到濾鏡的知識*/ } </style> <div class="wrapper"> <div class="note"> <span class="triangle"></span> <span class="filter"></span> </div> </div>
方法二：
還是 filter，但是設置 drop-shadow；
drop-shadow 不支持內陰影，但是支持不規則圖形的陰影。
<style type="text/css"> .note { margin: 100px; width: 200px; height: 80px; background: #f60; position: relative; border-radius: 5px; /*box-shadow: 0 0 10px 0px #000;*/ /*水平偏移---垂直偏移---模糊度---擴張半徑---顏色*/ filter: drop-shadow(0 0 6px #000); /*看清楚哦，drop-shadow沒有擴張半徑*/ } .triangle { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #f60; /*我們一般根據方向來寫三角形，這樣容易記憶；箭頭指向的反方向的顏色設置為你想要的，然后箭頭方向不要寫，另外兩個方向的顏色設置為transperent透明*/ position: absolute; top: -10px; left: 50%; margin-left: -10px; } </style> <div class="wrapper"> <div class="note"> <span class="triangle"></span> </div> </div>
小三角的邊框
三角形陰影問題解決方法如上。
同理，三角形的邊框也可以這樣寫：寫個三角形，沉在箭頭下邊，顏色設置成邊框顏色，位置比箭頭稍高一些（容器邊框寬度值），就可以了；
接下來我使用 :after 和 :before 寫的三角形和邊框，同理上面的陰影也可以這樣；
<style type="text/css"> .note { margin: 100px; width: 200px; height: 80px; background: #f0f; position: relative; border-radius: 5px; border: 1px solid #000; } .note:after { content: ""; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #f0f; /*我們一般根據方向來寫三角形，這樣容易記憶；箭頭指向的反方向的顏色設置為你想要的，然后箭頭方向不要寫，另外兩個方向的顏色設置為transperent透明*/ position: absolute; top: -10px; left: 50%; margin-left: -10px; } .note:before { content: ""; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #000; position: absolute; top: -11px; /*寫個三角形，沉在箭頭下邊，顏色設置成邊框顏色，位置比箭頭稍高一些（容器邊框寬度值），就可以了*/ left: 50%; margin-left: -10px; z-index: -1; } </style> <div class="wrapper"> <div class="note"></div> </div>
border-radius 圓角
css3 屬性 border-radius，“邊框半徑”，值可以用 px、em、pt、百分比等。
border-radius 支持四個角使用不同弧度，方向依次是左上--右上--右下--左下（是從左上開始，順時針）。
border-radius 還可以單獨對每個角設置：
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
單獨設置可以寫兩個值，第一個值是水平半徑，第二個值是垂直半徑；如果只有一個值，那么水平和垂直相等。
<style type="text/css"> * { padding: 0; margin: 0; } .test { width: 200px; height: 80px; margin: 100px; background: #f0f; border-radius: 15px 20px 35px 50px / 10% 25% 1em 50%; /*水平-----/-----垂直，中間用“/”隔開*/ /*左上水平 右上水平 右下水平 左下水平 / 左上垂直 右上垂直 右下垂直 左下垂直*/ /*這種方法不推薦使用，太亂了，傻傻分不清楚*/ } </style> <div class="test"></div>
當然，這個屬性我們用的最多的就是畫圓形，把值設成寬度的一半及以上（50%及以上）。
多重邊框
outline 制作多重邊框
有的需求是邊框外面還有邊框，我們可以用 outline 來寫，有一個相關的屬性 outline-offset，可以控制描邊與邊緣的位置關系，可以設置成負值；
outline 制作多重邊框，最多只能兩層，而且不能是弧形的；
.test { margin: 100px; width: 200px; height: 80px; border: 10px solid #f0f; outline: 15px solid #f90; outline-offset: -25px; }
box-shadow 制作多重邊框
box-shadow 可以做很多層（多了會很卡，電腦性能問題），而且配合 border-radius 屬性可以做出弧形；
box-shadow 是不占據空間的，所以無法響應事件，我們可以利用 inset 設置成內陰影，在擴大空間就好了；
.test { margin: 100px; width: 200px; height: 80px; border: 10px solid #f0f; border-radius: 25% 30% 50% 29%; box-shadow: 0 0 0 10px #0f0, 0 0 0 20px #ff0, 0 0 0 10px #0ff inset; /*水平偏移---垂直偏移---擴張半徑---模糊度---顏色*/ /*可以寫多個陰影，用逗號隔開*/ /*inset是內陰影*/ /*由於box-shadow屬性並不占據空間，所以是無法響應事件的，我們可以利用inset內陰影，再用padding擴充空間就好了*/ }