css -- box-shadow阴影属性的复合写法及高级用法,超详细!

CSDN 2024-08-16 10:03:06 阅读 98

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

🌈🌈文章目录

box-shadow属性介绍及用法 

基本使用

高级使用

五个值

inset(六个值)

多个阴影

关键字

加个动画

box-shadow属性介绍及用法 

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

基本使用

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

第一个值:阴影往X轴的偏移距离第二个值:阴影往Y轴偏移的距离第三个值:阴影模糊的半径,值越大阴影越模糊第四个值:阴影的颜色可以使用十六进制也可以使用rgba()写法

<!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<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>code>

</body>

</html>

高级使用

五个值

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

<code><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的时候变成了六个值,阴影将不再是对外扩散,相反是网内出现内阴影,而且第五个值(五个值时的第四个值)数值越大阴影往内扩散越大,直到铺满盒子,数值在变大阴影也不会出现变化了

多个阴影

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

<code><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(如果该属性是继承属性),或者重置为其默认值(如果该属性不是继承属性

加个动画

<code><!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<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>code>

</body>

</html>

实现动态效果 (先录屏然后制作的gif图,会比较模糊,大家将就看吧)

总结:以上就是我对<code>box-shadow属性的所有总结,希望对伙伴们有所帮助,学会一个算一个,喜欢的同学们可以一键三连,希望与大家共同分享共同进步,当然有什么问题也欢迎大家及时指正🥳🥳

🚀 个人简介:某大型国企高级前端开发工程师,7年研发经验,信息系统项目管理师、CSDN优质创作者、阿里云专家博主,华为云云享专家,分享前端后端相关技术与工作常见问题~

💟 作    者:码喽的自我修养❣️

📝 专    栏: HTML5与CSS3

🌈 若有帮助,还请 关注➕点赞➕收藏  ,不行的话我再努努力💪💪💪 

 更多专栏订阅推荐:

👍 前端工程搭建

💕 vue从基础到起飞

✈️ JavaScript深入研究

⭐️ uniapp与微信小程序

📝 前端工作常见问题汇总

✍️ GIS地图与大数据可视化



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。