border三角形阴影(不规则图形阴影)和多重边框的制作
前言：這是筆者學習之后自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！
1. 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 : 邊框寬度 邊框樣式 邊框顏色；
?
2. 用border做圖形
邊框的交界處是斜線，大師們用這個特性做出了三角形，配合其他屬性，可以做出各種圖形；
?原理就是控制四個方向的邊框顏色，就可以做出三角形；再控制寬度，就可以做出各種不同的鈍角、銳角三角形；
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">.triangle{border-style:solid;border-width: 30px 50px 60px 80px;/*我們可以控制各方向邊框的寬度，做出各種不同的三角形*/border-color: #f00 #0f0 #00f #0ff;/*四個方向的顏色自由設置，當設置其他三個方向或兩個方向的顏色為transparent(透明色)時，另一方向就成了一個三角形*/width: 0;/*盒子寬度為0，四個方向的border寬度一致，可以用border做正方形*/margin: 100px;}</style></head><body><div class="triangle"></div></body> </html>?
我比較喜歡根據方向來寫三角形，這樣容易理解：
.triangle{border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #0ff;/*我們一般根據方向來寫三角形，這樣容易記憶；箭頭指向的反方向的顏色設置為你想要的，然后箭頭方向不要寫，另外兩個方向的顏色設置為transperent透明*/}?
3.小三角的陰影
三角形做出來了，但是當我們給元素定義一個box-shadow，會出現如下情況：
如果不想要陰影，很好解決，刪掉三角形的box-shadow就好了；
而在實際應用中，我們很多情況下是需要陰影的，只是陰影出現在三角形的兩條邊上，下圖給容器設置了陰影；
方法一：我們可以在加一個元素，也寫成三角形，設置層級比箭頭和容器元素都小，并且設置濾鏡，位置比箭頭稍高，露出邊緣部分就可以了；
當我們把之前的箭頭刪掉，就是如右圖：
完成品：PS：濾鏡也有兼容性問題，建議用谷歌瀏覽器測試；
以下是代碼：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><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></head><body><div class="wrapper"><div class="note"><span class="triangle"></span><span class="filter"></span></div></div></body> </html> View Code?
方法二：還是filter，但是設置drop-shadow；
drop-shadow不支持內陰影，但是支持不規則圖形的陰影;
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><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></head><body><div class="wrapper"><div class="note"><span class="triangle"></span></div></div></body> </html> View Code
?
4.小三角的邊框
三角形陰影問題可以這樣解決，同理，三角形的邊框也可以這樣：
寫個三角形，沉在箭頭下邊，顏色設置成邊框顏色，位置比箭頭稍高一些（容器邊框寬度值），就可以了；
?接下來我使用：after 和 :before 寫的三角形和邊框，同理上面的陰影也可以這樣；
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><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></head><body><div class="wrapper"><div class="note"></div></div></body> </html> View Code?
5.?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
單獨設置可以寫兩個值，第一個值是水平半徑，第二個值是垂直半徑；如果只有一個值，那么水平和垂直相等；
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><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></head><body><div class="test"></div></body> </html>當然，這個屬性我們用的最多的就是畫圓形，把值設成寬度的一半及以上（50%及以上），border-radius：50%，我就不舉列子了;
?
6. 多重邊框
outline制作多重邊框
有的需求是邊框外面還有邊框，我們可以用outline來寫，有一個相關的屬性outline-offset，可以控制描邊與邊緣的位置關系，可以設置成負值；
outline制作多重邊框，最多只能兩層，而且不能是弧形的；
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding: 0;margin: 0;}.test{margin: 100px;width: 200px;height: 80px;border:10px solid #f0f;outline: 15px solid #f90;outline-offset: -25px;}</style></head><body><div class="test"></div></body> </html> View Code?
box-shadow制作多重邊框
box-shadow可以做很多層（多了會很卡，電腦性能問題），而且配合border-radius屬性可以做出弧形；
box-shadow是不占據空間的，所以無法響應事件，我們可以利用inset設置成內陰影，在擴大空間就好了；
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding: 0;margin: 0;}.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擴充空間就好了*/}</style></head><body><div class="test"></div></body> </html> View Code?
總結
以上是生活随笔為你收集整理的border三角形阴影(不规则图形阴影)和多重边框的制作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css常用属性初总结:伪元素和伪元素
- 下一篇： css之hover改变子元素和其他元素样