CSS3中box-shadow屬性
阿新 • • 發佈：2020-11-20
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;