css中 box-shadow阴影属性的复合写法及高级用法详解
我要评论前言：最近又叕看到了一个好看的特效，随后整理了一下，发现实现起来主要靠一个css属性就实现了，有一次刷新了我对css强大的认知😎，这个属性就是box-shadow，平常我们用到的比较少，但是针对于C端可能使用就多了，但是你们真正掌握了它的使用吗？让我这一文带你深度了解box-shadow
box-shadow属性介绍及用法
box-shadow可以为元素的框架添加阴影效果，这个属性可以设置多个阴影效果，每个阴影效果之间用逗号分隔。box-shadow属性可以设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色
基本使用
平常使用我们都是box-shadow：第一个值 第二个值 第三个值 第四个值；每个值后面用空格隔开
- 第一个值：阴影往X轴的偏移距离
- 第二个值：阴影往Y轴偏移的距离
- 第三个值：阴影模糊的半径，值越大阴影越模糊
- 第四个值：阴影的颜色可以使用十六进制也可以使用rgba()写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
// box盒子阴影X轴便宜10像素Y轴偏移10像素，模糊半径为20像素，颜色为#ccc
.box{
margin: 100px auto;
width: 200px;
height: 200px;
border-radius: 50%;
border: none;
background-color: rgb(151, 211, 151);
box-shadow: 10px 10px 20px #ccc;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
高级使用
五个值
box-shadow其实有五个值，如果有五个值的情况，那第四个值就不再是颜色了，而第五个值是颜色，第四个值表示的是阴影的半径大小，值越大阴影越大
<style>
.box{
width: 200px;
height: 200px;
border-radius: 50%;
border: none;
background-color: rgb(77, 255, 0);
box-shadow: 10px 10px 20px 30px #ccc;
}
</style>
inset（六个值）
当使用了inset的时候变成了六个值，阴影将不再是对外扩散，相反是网内出现内阴影，而且第五个值（五个值时的第四个值）数值越大阴影往内扩散越大，直到铺满盒子，数值在变大阴影也不会出现变化了
多个阴影
除了可以控制内阴影还是外阴影以外，还可以使用 ，来进行间隔实现多个阴影效果
<style>
.box{
margin:100px auto;
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;
}
</style>
一个好看的小球这不就出来了🤩😍🥰
关键字
而且box-shadow还有几个特殊的关键字
- inherit：将CSS属性的值设置为其父元素的值。
- initial：将CSS属性的值重置为其默认值。
- revert：将CSS属性的值重置为其父元素的值（如果该属性是继承属性），或者重置为其默认值（如果该属性不是继承属性）。
- revert-layer：将CSS属性的值重置为其父元素的值（如果该属性是继承属性），或者重置为其默认值（如果该属性不是继承属性）。与revert相比，它还会重置元素上所有层叠上下文中该属性的值。
- unset：将CSS属性的值设置为其父元素的值（如果该属性是继承属性），或者重置为其默认值（如果该属性不是继承属性）。
具体解释意思就是
- box-shadow: inherit;会将元素的box-shadow设置为其父元素的box-shadow；
- box-shadow: initial;会将元素的box-shadow设置为其默认值；
- box-shadow: revert;会将元素的box-shadow设置为其父元素的box-shadow（如果该属性是继承属性），或者重置为其默认值（如果该属性不是继承属性）；
- box-shadow: revert-layer;会将元素上所有层叠上下文中box-shadow的值重置为其父元素的box-shadow（如果该属性是继承属性），或者重置为其默认值（如果该属性不是继承属性）；
- box-shadow: unset;会将元素的box-shadow设置为其父元素的box-shadow（如果该属性是继承属性），或者重置为其默认值（如果该属性不是继承属性
加个动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #000;
}
.box{
margin: 100px auto 0;
width: 200px;
height: 200px;
border-radius: 50%;
border: none;
animation: redBall 6s linear infinite;
background-color: rgb(0, 13, 255);
box-shadow: 0 0 20px #fff,20px 0 80px rgb(0, 255, 191),-20px 0 80px rgb(0, 255, 81),inset 0 0 50px #fff,inset 200px 0 80px rgb(255, 234, 0);
}
@keyframes redBall{
0%{
box-shadow: 0 0 20px #fff,20px 0 80px rgb(0, 255, 213),-20px 0 80px rgb(72, 255, 0),inset 0 0 50px #fff,inset -200px 0 80px rgb(0, 64, 255);
}
50%{
box-shadow: 0 0 20px #fff,20px 0 80px rgb(0, 242, 255),-20px 0 80px rgb(17, 255, 0),inset 0 0 50px #fff,inset 0px 0 80px rgb(255, 0, 55);
}
100%{
box-shadow: 0 0 20px #fff,20px 0 80px rgb(179, 255, 0),-20px 0 80px #0ff,inset 0 0 50px #fff,inset 200px 0 80px rgb(255, 0, 21),inset 10px 0 80px #0ff;
}
}
</style>
<body>
<div class="box"></div>
</body>
</html>实现动态效果 (先录屏然后制作的gif图，会比较模糊，大家将就看吧)
总结：以上就是我对box-shadow属性的所有总结，希望对伙伴们有所帮助，学会一个算一个，喜欢的同学们可以一键三连，希望与大家共同分享共同进步，当然有什么问题也欢迎大家及时指正🥳🥳
到此这篇关于css中 box-shadow阴影属性的复合写法及高级用法的文章就介绍到这了,更多相关css box-shadow阴影属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
Box-shadow属性是css效果非常实用的修饰效果，可以在很多地方见到它的影子，这篇文章主要介绍了css阴影详解之Box-shadow修饰性属性详解,需要的朋友可以参考下2024-08-13
这篇文章主要介绍了CSS3里box-shadow属性的使用方法示例详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧需要的朋友可以参2020-07-03
CSS阴影效果的比较之drop-Shadow与box-Shadow
这篇文章主要介绍了CSS阴影效果的比较之drop-Shadow与box-Shadow，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小2019-05-23
这篇文章主要介绍了css box-shadow实现曲边阴影与翘边阴影,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-05- box-shadow是给元素块添加周边阴影效果，本文给大家介绍Photoshop投影与CSS中box-shadow的转换，对css中box shadow相关知识感兴趣的朋友一起学习吧2015-11-27
CSS伪元素 :before, :after, box-shadow应用
利用CSS伪元素 ：before 和 ：after 可以在文档前后插入内容而不改变文档原有结构，下面有个不错的示例，大家可以参考下2014-03-04ie-css3.htc 让IE6, 7, and 8也支持box-shadow
IE6/7并不支持CSS3的属性，IE8也不能很好的支持CSS3。如何让IE 6/7/8支持border-radius (rounded)，box-shadow ( shadow)，text-shadow等这些属性呢？这里介绍一个通过htc2012-10-12- 你在使用box-shadow来实现阴影效果的时候，有没有注意到有些情况下，阴影并不是透明的效果2011-08-28
CSS text-shadow，box-shadow，border-radius属性
篇文章将对 CSS 的几个新属性 (text-shadow，box-shadow，and border-radius) 做基本介绍。这些 CSS3 属性通常用来加强页面布局。2010-03-09
最新评论