box-shadow屬性是一個css3屬性，允許我們在幾乎任何元素上來創建陰影效果，類似於在設計軟件中的”drop shadow”。這些陰影效果允許我們在原本平面的、二維的頁面上面創建出深度（第三維）的錯覺。
定義和用法
box-sizing屬性定義了如何計算元素的寬度和高度：它們是否包括填充和邊框。
| 特征 | 說明 |
|---|---|
| 默認值 | content-box |
| 繼承 | 無 |
| 動畫 | 有。 |
| css版本 | CSS3 |
| JavaScript語法 | object.style.boxSizing="border-box" |
兼容性
了完全支持該屬性的第一個瀏覽器版本。數字后跟-ms-， -webkit-，-moz-或-o-指定使用前綴的第一個版本。
資源搜索網站大全 http://www.szhdn.com 廣州VI設計公司https://www.houdianzi.com
基本語法
offset-x: x軸偏移的距離，從左到右
offset-y: y軸偏移的距離，從上到下
blur-radius: 模糊處理的大小
spread-radius: 擴大區域的大小
color: 陰影的顏色
inset: 內部陰影 (Semantic-UI的做法，就是用了內部陰影box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset)
例子
同一個元素可以定義多個box-shadow，用逗號隔開
/* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* Any number of shadows, separated by commas */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* Global keywords */ box-shadow: inherit; box-shadow: initial; box-shadow: unset;