CSS3边框属性 阴影 box-shadow 属性
box-shadow 属性各个参数的含义
值 | 说明 |
---|---|
h-shadow | 必需的。水平阴影的位置。允许负值 |
v-shadow | 必需的。垂直阴影的位置。允许负值 |
blur | 可选。模糊距离,使用类似高斯模糊的算法将阴影进行模糊处理,模糊后阴影的范围将扩大,扩大的距离为blur/2 |
spread | 可选。阴影的大小:在原来阴影的大小上,各个方向同时扩大spread |
color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
inset | 可选。向盒子内部延伸阴影 |
1、阴影的大小默认是跟盒子大小一致的(含boeder),h-shadow和v-shadow只会改变阴影的水平和垂直位置,不会改变大小,spread则会改变阴影的面积大小,
blur负责将阴影进行模糊处理,inset决定是否向元素内部方向产生阴影--内阴影 color 则决定阴影的颜色和透明度
2、内阴影是从border内圈开始扩展
外阴影(默认值)是从border外圈开始扩展
我们可以同时设置多种效果的阴影,层级方面:主元素>先设置的阴影>后面的阴影,各个阴影之间的颜色不会自动混合,二十相互覆盖
比如:
1 2 3 4 5 6 7 8 9 | style{ .div{ box-shadow: inset 0 0 6px #fff, inset 3px 0 6px #eaf5fc, inset 2px -2px 10px #efcde6, inset 0 0 60px #f9f6de, 0 0 20px #fff; } } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix