CSS3中box-shadow属性
box-shadow属性是⼀个css3属性，允许我们在⼏乎任何元素上来创建阴影效果，类似于在设计软件中的”drop shadow”。这些阴影效果允许我们在原本平⾯的、⼆维的页⾯上⾯创建出深度（第三维）的错觉。
定义和⽤法
box-sizing属性定义了如何计算元素的宽度和⾼度：它们是否包括填充和边框。
特征说明
默认值content-box
继承⽆
动画有。
css版本CSS3borderbox
JavaScript语法object.style.boxSizing="border-box"
兼容性
了完全⽀持该属性的第⼀个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使⽤前缀的第⼀个版本。
基本语法
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;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。