QQ:3020889729                                                                                 小蔡

盒子阴影属性

未设置阴影前:
CSS之⑮盒子阴影·总结/以及阴影叠加基础语法·总结
设置阴影后:
CSS之⑮盒子阴影·总结/以及阴影叠加基础语法·总结

盒子阴影属性值介绍

盒子阴影属性值包括:X偏移,Y偏移,阴影模糊半径,阴影扩散半径,阴影径向和阴影颜色并以多个逗号分隔
box-shadow: 1px 1px 1px 1px yellow;

至少给出前面两个参数(x,y偏移值)

x、y方向:
CSS之⑮盒子阴影·总结/以及阴影叠加基础语法·总结

设置大于三个参数时的参数规则

如果存在颜色参数/阴影径向参数,务必放在最后,他们顺序可先后调换,但是要在所有参数之后。
如果是要设置模糊半径和扩散半径,务必遵循指定的顺序——也就是要先有模糊半径,才有扩散半径设置。

盒子阴影可叠加

盒子阴影可以存在多个,可多次调用属性box-shadow进行设置,也可以用一个box-shadow属性用逗号隔开进行设置。(这也是,我之前为什么说,要把颜色参数/径向参数放最后,因为你提前了,阴影的颜色可能不是你要的效果,默认阴影颜色是浏览器选择——一般为透明)
例子
box-shadow: 1px 1px 1px 1px yellow,4px 4px 2px 2px red;
效果:
CSS之⑮盒子阴影·总结/以及阴影叠加基础语法·总结

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-05-30
  • 2022-01-15
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-11-11
  • 2022-02-26
  • 2021-11-17
相关资源
相似解决方案