css中box-shadow阴影属性的复合写法及高级用法介绍_F11

分享到

css中box-shadow阴影属性的复合写法及高级用法介绍

css 来源：互联网作者：佚名发布时间：2024-08-28 22:06:25 人浏览

摘要

最近又叕看到了一个好看的特效，随后整理了一下，发现实现起来主要靠一个css属性就实现了，有一次刷新了我对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>

<head>

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

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

<head>

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

</body>

</html>

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

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

您可能感兴趣的文章 :

原文链接 :

Tag : shadow(4)css(339)

css3使用box-shadow实现浮雕风格按钮效果

利用 box-shadow 实现浮雕风格的按钮。 HTML： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 form div class=segment h1Sign up/h1 /div label input type=text p
CSS的font-stretch属性与字符胖瘦控制(使用示例)

font-stretchCSS 属性用于选择字体的一个更宽（expanded）或更窄（condensed）的版本，以控制字符的胖瘦。然而，需要注意的是，并非所有的字体
CSS属性fit-content示例介绍

CSS属性：fit-content 1 2 3 4 5 6 div class=content img src=src\assets\404_images\xxmLogo.png alt= div class=frosted-glass pThis is a frosted glass effect./p /div /div 1 2 3 4 5 6
CSS中的mix-blend-mode属性详解(设置元素的混合模式

一、mix-blend-mode属性介绍 CSS中的【mix-blend-mode属性】描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合；用于设置元
CSS的:in-range和:out-of-range伪类如何增强输入验证的

在Web表单设计中，输入验证是确保用户提交有效数据的关键环节。HTML5引入了input元素的min和max属性，使得在前端就可以对数值输入进行范围
css中box-shadow阴影属性的复合写法及高级用法介绍

最近又叕看到了一个好看的特效，随后整理了一下，发现实现起来主要靠一个css属性就实现了，有一次刷新了我对css强大的认知????，这个属
通过css修改video标签的原生样式的介绍

通过css修改video标签的原生样式描述修改video标签的原生样式实现在控制台中打开设置，勾选显示用户代理 shadow DOM，就可以审查video标签
el-table滚动条样式修改方法

我们知道，el-table滚动条样式默认取的好像是我们全局滚动条的样式，当我们修改了全局滚动条的样式后，table表格的滚动条样式也随之而变
css自定义变量 var()案例分析介绍

现在新版本的UI框架，基本使用CSS变量 css的一个函数：var()，此函数在有些场景下能优化不少代码量。 var() 介绍借用下W3C的定义： var() 函数
css阴影之Box-shadow修饰性属性

Box-shadow属性是css效果非常实用的修饰效果，可以在很多地方见到它的影子。知乎中的Box-shadow 百度中的Box-shadow 所以，来详细看一下Box-sha