今天同事問我一個問題，說下圖的效果是怎么實現的
我當時想都沒有想說這不就是兩條線嘛，他說是一條線用box-shadow做出來的，之前也沒有遇到過，覺得很有意思就試了一把。
語法
box-shadow: h-shadow v-shadow blur spread color inset;
注釋：box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是
| 值 | 描述 | |
|---|---|---|
| h-shadow | 必需。水平陰影的位置。允許負值。 | |
| v-shadow | 必需。垂直陰影的位置。允許負值。 | |
| blur | 可選。模糊距離。 | |
| spread | 可選。陰影的尺寸。 | |
| color | 可選。陰影的顏色。請參閱 CSS 顏色值。 | |
| inset | 可選。將外部陰影 (outset) 改為內部陰影。 |
注意我把前兩個必需屬性里面有個允許負值都標成了紅色，這是關鍵。
好了，科普完成，上手后發現正常給值的話線一直會有兩邊陰影，這樣的話是達不到上圖的效果的，我們要的是單邊的陰影效果。
1 <style type="text/css"> 2 .box-shadow { 3 width: 200px; 4 height: 100px; 5 border-radius: 5px; 6 border: 1px solid #ccc; 7 margin: 20px; 8 } 9 .top { 10 box-shadow: 0 -2px 0 red; 11 } 12 .right { 13 box-shadow: 2px 0 0 green; 14 } 15 .bottom { 16 box-shadow: 0 2px 0 blue; 17 } 18 .left { 19 box-shadow: -2px 0 0 orange; 20 } 21 style>
1 <div class="box-shadow top">div> 2 <div class="box-shadow right">div> 3 <div class="box-shadow bottom">div> 4 <div class="box-shadow left">div>
效果如下圖：
最后的代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style type="text/css"> 8 .border{ 9 height: 200px; 10 border-left : 1px solid red; 11 box-shadow: -1px 0 black; 12 } 13 </style> 14 <body> 15 <div class="border"></div> 16 </body> 17 </html>