十分钟掌握box-shadow属性高级用法🧐

一骑绝尘蛙
5,015 阅读4分钟

前言

最近又叕看到了一个好看的特效，随后整理了一下，发现实现起来主要靠一个css属性就实现了，有一次刷新了我对css强大的认知😎，这个属性就是box-shadow，平常我们用到的比较少，但是针对于C端可能使用就多了，但是你们真正掌握了它的使用吗？让我这一文带你深度了解box-shadow🧐

box-shadow属性介绍及用法

box-shadow可以为元素的框架添加阴影效果，这个属性可以设置多个阴影效果，每个阴影效果之间用逗号分隔。box-shadow属性可以设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色

基本使用

平常使用我们都是box-shadow：第一个值 第二个值 第三个值 第四个值；每个值后面用空格隔开，

  1. 第一个值：阴影往X轴的偏移距离
  2. 第二个值：阴影往Y轴偏移的距离
  3. 第三个值：阴影模糊的半径，值越大阴影越模糊
  4. 第四个值：阴影的颜色可以使用十六进制也可以使用rgba()写法
// box盒子阴影X轴便宜10像素Y轴偏移10像素，模糊半径为20像素，颜色为#ccc
.box{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: none;
    background-color: red;
    box-shadow: 10px 10px 20px #ccc;
}

image.png

高级使用

五个值

box-shadow其实有五个值，如果有五个值的情况，那第四个值就不再是颜色了，而第五个值是颜色，第四个值表示的是阴影的半径大小，值越大阴影越大

.box{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: none;
    background-color: red;
    box-shadow: 10px 10px 20px 30px #ccc;
}

image.png

inset（六个值）

当使用了inset的时候变成了六个值，阴影将不再是对外扩散，相反是网内出现内阴影，而且第五个值（五个值时的第四个值）数值越大阴影往内扩散越大，直到铺满盒子，数值在变大阴影也不会出现变化了

.box{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: none;
    background-color: red;
    box-shadow: inset 10px 10px 20px 30px #ccc;
    /* 这是第五个值达到最大值 */
    /* box-shadow: inset 10px 10px 20px 200px #ccc; */
}

image.png

image.png

多个阴影

除了可以控制内阴影还是外阴影以外，还可以使用 ;来进行间隔实现多个阴影效果

.box{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: none;
  background-color: aqua;
  box-shadow: 0 0 20px #fff,20px 0 80px #f0f,-20px 0 80px #0ff,inset 0 0 50px #fff,inset 200px 0 80px #f0f;
}

image.png

一个好看的小球这不就出来了🤩😍🥰

关键字

而且box-shadow还有几个特殊的关键字

  1. inherit：将CSS属性的值设置为其父元素的值。
  2. initial：将CSS属性的值重置为其默认值。
  3. revert：将CSS属性的值重置为其父元素的值（如果该属性是继承属性），或者重置为其默认值（如果该属性不是继承属性）。
  4. revert-layer：将CSS属性的值重置为其父元素的值（如果该属性是继承属性），或者重置为其默认值（如果该属性不是继承属性）。与revert相比，它还会重置元素上所有层叠上下文中该属性的值。
  5. unset：将CSS属性的值设置为其父元素的值（如果该属性是继承属性），或者重置为其默认值（如果该属性不是继承属性）。

具体解释意思就是

  1. box-shadow: inherit;会将元素的box-shadow设置为其父元素的box-shadow；
  2. box-shadow: initial;会将元素的box-shadow设置为其默认值；
  3. box-shadow: revert;会将元素的box-shadow设置为其父元素的box-shadow（如果该属性是继承属性），或者重置为其默认值（如果该属性不是继承属性）；
  4. box-shadow: revert-layer;会将元素上所有层叠上下文中box-shadow的值重置为其父元素的box-shadow（如果该属性是继承属性），或者重置为其默认值（如果该属性不是继承属性）；
  5. box-shadow: unset;会将元素的box-shadow设置为其父元素的box-shadow（如果该属性是继承属性），或者重置为其默认值（如果该属性不是继承属性

加个动画

结尾

本文正在参加「金石计划」 以上就是我对box-shadow属性的所有总结，希望对jym有所帮助，学会一个算一个，喜欢的jym可以一键三连，希望与大家共同分享共同进步，当然有什么问题也欢迎大家及时指正🥳🥳

avatar
文章
阅读
粉丝