box-shadow属性详解
1.box-shadow属性语法
box-shadow 属性接受值最多由五个不同的部分组成。
box-shadow: offset-x offset-y blur spread color position;
borderbox换句说： 对象选择器 {box-shadow:X轴偏移量  Y轴偏移量  阴影模糊半径  阴影扩展半径  阴影颜⾊  投影⽅式 }
不像其它的属性，⽐如 border，它们的接受值可以被拆分为⼀系列⼦属性，box-shadow 属性没有⼦属性。这意味着记住这些组成部分的顺序更加重要，尤其是那些长度值。
2.offset-x
第⼀个长度值指明了阴影⽔平⽅向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。    CSS
.left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }
.
right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }
3.offset-y
第⼆个长度值指明了阴影竖直⽅向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下⽅；值为负数时，阴影在元素的上⽅。    .left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) }
.right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }
4.blur
第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使⽤ ⾼斯模糊 滤波器带来的效果。值为 0 意味着该阴影是固态⽽锋利的，完全完全没有模糊效果。blur 值越⼤，阴影则更不锋利⽽更朦胧 / 模糊。负值是不合法的，会被修正成 0。
.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }
.middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }
.right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }
5.spread
第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩⼤，反之值为负值是，则缩⼩。
。
.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }
.middle { box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) }
.right { box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.5) }
color 部分的值正如你所预料的，是指阴影的颜⾊。它可以是任意的颜⾊单元 （见 在 CSS 中与颜⾊打交道）。
.left { box-shadow: 0px 0px 20px 10px #67b3dd }
.right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) }
7.position
此参数是⼀个可选值，如果不设值，其默认的投影⽅式是外阴影；
如果取其唯⼀值“inset”，就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影。
.left { box-shadow: 0px 0px 20px 10px #67b3dd }
.right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) inset}

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