CSS3中box-shadow属性

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;