盒子阴影

box-shadow 属性用于向盒子添加一个或多个阴影效果。
offset-x:阴影的水平偏移量。正数向右偏移,负数向左偏移。
offset-y:阴影的垂直偏移量。正数向下偏移,负数向上偏移。
blur:阴影模糊度,不能取负数。
spread:阴影大小。正数阴影扩大(阴影大小大于盒子大小),负数阴影缩小(阴影大小小于盒子大小),0阴影与盒子同等大小。
inset:表示添加内阴影,默认为外阴影。

1.inset: 阴影类型, 可选值。 如果不设置, 其默认的投影方式是外阴影; 如果取其唯一值“ inset”, 就是给元素设置内阴影。
2.x-offset:阴影水平偏移量, 其值可以是正负值。 如果取正值, 则阴影在元素的右边, 反之, 阴影在元素的左边。
3.y-offset:阴影垂直偏移量, 其值可以是正负值。 如果取正值, 则阴影在元素的底部, 反之, 阴影在元素的顶部。
4.blur- radius:阴影模糊半径, 可选参数。 其值只能是正值, 如果取值 为“ 0” 时, 表示阴影不具有模糊效果, 如果取值越大, 阴影的边缘就越模糊。
5.spread- radius: 阴影扩展半径, 可选参数。 其值可以是正负值, 如果取值为正值, 则整个阴影都延展扩大, 反之, 则整个阴影都缩小。
6.color: 阴影颜色, 可选参数, 如果不设定任何颜色 时, 浏览器会取默认色, 但各浏览器 默认色不一样,
在图片上加内阴影,先给图片添加一个容器,如:div等

逆战班 盒子阴影

逆战班 盒子阴影

相关文章: