请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

box-shadow属性四个值是什么?

 
1、offset-x

第一个长度值指明了阴影水平方向的偏移,即阴影在 x 轴的位置。值为正数时,阴影在元素的右侧;值为负数时,阴影在元素的左侧。

2、offset-y

第二个长度值指明了阴影竖直方向的偏移,即阴影在 y 轴的位置。值为正数时,阴影在元素的下方;值为负数时,阴影在元素的上方。

3、blur

第三个长度值代表了阴影的模糊半径,举例来说,就是你在设计软件中使用 高斯模糊 滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的,完全完全没有模糊效果。blur 值越大,阴影则更不锋利而更朦胧 / 模糊。负值是不合法的,会被修正成 0。

4、spread
第四个长度代表了阴影扩展半径,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小。

box-shadow: 50px 100px 5px #f2347d;   如图1:
50px为水平阴影位置(h-shadow),
100px为垂直影响位置(v-shadow),
5px为模糊距离(blur),
#f2347d为阴影颜色(color)‍

[url=https://iknow-pic.cdn.bcebos.com/96dda144ad345982e60ad8001ef431adcaef849b][/url]


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则