CSS 阴影技术和详细信息（其他阴影模拟属性）

terry 2年前 (2023-09-27) 阅读数 73 #数据结构与算法

CSS 阴影技术和详细信息标题。 CSS Shadow，但不一定是 box-shadow 和 filter:drop-shadow，为什么？因为阴影还可以使用其他属性来模拟，并且有很多不同的阴影。现在我来告诉你~

单面投影

我们先来说说单面投影。大约box-shadow，通常用于生成两侧投影。投影，或称四面投影。如下：

好吧，如果要做单面投影呢？？、y方向偏移值、模糊半径、扩展半径。

这是一个小技巧，扩张半径可以为负值。

那么，如果阴影的模糊半径与的负扩展半径一致，那么我们将看不到阴影，因为阴影将位于原始元素中，除此之外。给定设置方向偏移。所以这次，我们给一个方向的偏移值，得到单面投影：

Demo CodePen -- 单面投影 css

投影背景/背景动画

继续上面。

显然，0 = -0，所以当模糊半径和扩展半径box-shadow也可以得到等于0的元素。只是被元素本身遮挡了，而我们尝试弥补损失。

CSS代码如下：

div {
    width: 80px;
    height: 80px;
    border: 1px solid #333;
    box-sizing: border-box;
    box-shadow: 80px 80px 0 0 #000;
}
复制代码

得到如下结果：

为了什么？这似乎没有道理。

嗯，这似乎没有任何意义。不过我们看到box-shadow可以设置为多层，即多层阴影，并且可以进行过渡动画（之间的动画）。但是background-image: Linear-gradient()，即渐变背景无法动画化。

你要去哪里？好吧，我们回去使用上面的功能。我们可以使用 box-shadow 来创建只能使用渐变实现的背景图像：

使用 box-shadow 来获取它。 CSS代码如下（可简化）：

.shadow {
    position: relative;
    width: 250px;
    height: 250px;
}

.shadow::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    top: -50px;
    left: -50px;
    box-shadow: 
        50px 50px #000, 150px 50px #000, 250px 50px #000,
        50px 100px #000, 150px 100px #000, 250px 100px #000,
        50px 150px #000, 150px 150px #000, 250px 150px #000,
        50px 200px #000, 150px 200px #000, 250px 200px #000,
        50px 250px #000, 150px 250px #000, 250px 250px #000;
}
复制代码

如果使用渐变来应用，只需要这样：

.gradient {
    width: 250px;
    height: 250px;
    background-image: linear-gradient(90deg, #000 0%, #000 50%, #fff 50%, #fff 100%);
    background-size:  100px 100px;
}
复制代码

为什么选择box-shadow？因为它可以做补间动画，像这样，它不能使用渐变：

CodePen Demo -- box-shadow 实现背景动画

当然，这只是一个 Demo 示例，发挥你的想象力，还有很多。有趣的效果，这是另一个：

CodePen 演示 - CSS Checker Illusion（作者：David Khourshid）

嗯，这很有趣，但可能不实用。

立体投影

好，我们继续。下一个主题是立体投影。

这个说法很奇怪。着色的目的是让原始元素显得更加立体。那么这里所说的三维投影是什么三维方法呢？

这里所谓的立体投影不应该使用box-shadow、text-shadow或‼，而是使用其他元素或模拟元素阴影的属性。目标是克服一些元素位置限制，例如box-shadow。 阴影位置、大小、模糊可以更加灵活。

好吧，让我们看看元素。我希望通过调整阴影位置让它变得更加三维：

上图中的div只有box-shadow，它似乎与三维没有任何关系。接下来，我们使用div的伪元素生成一个与原始图像的角形状类似的形状，然后使用变换来移动它，可以是这样的：

OK，最后通过应用一些模糊对伪元素生成的元素（错了一个filter或者box-shadow），可以得到一个角好像塌成两半的三维效果：

代码很简单，伪CSS代码如下：

div {
    position: relative;
    width: 600px;
    height: 100px;
    background: hsl(48, 100%, 50%);
    border-radius: 20px;
}

div::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    bottom: 0;
    border-radius: 10px;
    background: hsl(48, 100%, 20%);
    transform: translate(0, -15%) rotate(-4deg);
    transform-origin: center center;
    box-shadow: 0 0 20px 15px hsl(48, 100%, 20%);
}
复制代码

所以总结一下：

立体投影的要点是方便伪元素生成与父元素大小相同的元素，然后旋转定位到合适的位置，然后指定阴影操作
颜色用法三维投影文字/长阴影文字
三维效果上面的尺寸确实不适用于文字，所以我们需要另想办法来处理这些三个维度。文字立体阴影效果。
通常，我们使用文字阴影来创建文字阴影，像这样：
<div> Txt Shadow</div> ----- div { text-shadow: 6px 6px 3px hsla(14, 100%, 30%, 1); } 复制代码
嗯，相当不错，但不够三维。因此，要获得三维文本阴影，最常见的方法是使用多个文本阴影叠加层。
提示：像box-shadow、text-shadow可以多层堆叠！但对于单个元素，drop-shadow只能是一层。
好吧，对于上面的文本，我们尝试添加 50 个文本阴影层。是的，50层手写确实很快~
嗯，手写确实很慢，而且容易出错，所以这里我们需要使用SASS/LESS来帮助编写生成50层阴影的函数。 好的，我们在右侧和底部每隔 1px 创建一个文本阴影层：
@function makeLongShadow($color) { $val: 0px 0px $color; @for $i from 1 through 50 { $val: #{$val}, #{$i}px #{$i}px #{$color}; } @return $val; } div { text-shadow: makeLongShadow(hsl(14, 100%, 30%)); } 复制代码
上面的 SCSS 代码。编译后会生成如下CSS：
div { text-shadow: 0px 0px #992400, 1px 1px #992400, 2px 2px #992400, 3px 3px #992400, 4px 4px #992400, 5px 5px #992400, 6px 6px #992400, 7px 7px #992400, 8px 8px #992400, 9px 9px #992400, 10px 10px #992400, 11px 11px #992400, 12px 12px #992400, 13px 13px #992400, 14px 14px #992400, 15px 15px #992400, 16px 16px #992400, 17px 17px #992400, 18px 18px #992400, 19px 19px #992400, 20px 20px #992400, 21px 21px #992400, 22px 22px #992400, 23px 23px #992400, 24px 24px #992400, 25px 25px #992400, 26px 26px #992400, 27px 27px #992400, 28px 28px #992400, 29px 29px #992400, 30px 30px #992400, 31px 31px #992400, 32px 32px #992400, 33px 33px #992400, 34px 34px #992400, 35px 35px #992400, 36px 36px #992400, 37px 37px #992400, 38px 38px #992400, 39px 39px #992400, 40px 40px #992400, 41px 41px #992400, 42px 42px #992400, 43px 43px #992400, 44px 44px #992400, 45px 45px #992400, 46px 46px #992400, 47px 47px #992400, 48px 48px #992400, 49px 49px #992400, 50px 50px #992400; } 复制代码
看效果：
是的，很好看，立体感十足。然而，它却很丑陋，而且莫名其妙地奇怪。
怎么了？阴影实际上有亮度和透明度的变化。因此，对于每个渐进文本阴影层，亮度和透明度必须不断改变。这个需求用SASS就可以很好的实现。下面是两个SASS颜色函数：
淡出更改颜色透明度，使颜色更透明
去饱和更改颜色饱和度值，使颜色不那么饱和关于SASS颜色函数，可以看这里：Sass基础知识-颜色函数
我们使用上面的两个SASS颜色函数来修改我们的CSS代码，主要修改函数 makeLongShadow上面的函数：好了，看最后效果：
是的，完成了，这次更顺眼了~
CodePen Demo -- 三维文字阴影
当然，使用CSS生成三维文字有很多种方法阴影。这是另一个例子，它使用透明色和背景色的多个线性渐变来创建三维阴影文本。有兴趣的同学可以看一下自定义实现：
线性渐变与阴影结合，得到条纹三维阴影。条纹字符
长阴影
如上所述，通过多层阴影叠加可以实现三维文字阴影。它也可以用在div等容器中。当然，这里还有其他有趣的方法。例如，如果我们有一个矩形元素，想要添加一个长阴影，如下所示：
要生成这样的长阴影，可以如上所述添加几个阴影层，然后使用该元素的两个伪元素。其实上图是这样的：
重点是我们通过transform:skew()变换两个伪元素来实现长阴影，并将背景色从纯色改为透明色。效果：
Demo CodePen -- 线性渐变模拟长阴影
彩色阴影
一般来说，我们生成阴影的方式通常是 box-shadow， filter: drop-shadow( ），阴影文本。然而，使用它创建的阴影通常只能是纯色或同色系的。
你做的这个，不是也能产生渐变阴影吗？
嗯，当然不是。
这确实不可能，但是通过巧妙地使用filter:blur模糊滤镜，我们可以假装产生渐变阴影效果或丰富的色彩。
如果我们有一个像下面这样的头像图像：
让我们使用滤镜添加一个与原始图像颜色相同的阴影效果图层。核心CSS代码如下：
.avator { position: relative; background: url($img) no-repeat center center; background-size: 100% 100%; &::after { content: ""; position: absolute; top: 10%; width: 100%; height: 100%; background: inherit; background-size: 100% 100%; filter: blur(10px) brightness(80%) opacity(.8); z-index: -1; } } 复制代码
看效果：
简单的原理就是用伪元素生成一个与原图大小相同的新图片并叠加在原图下方，然后使用模糊它的滤镜filter：blur()与其他亮度/对比度、透明度和其他滤镜配合使用，创建阴影的错觉，假装是原始图像的阴影效果。
嗯，最重要的是这句话filter：blur(10px) Bright(80%) opacity(.8); 。？让我们看看使用 box-shadow 实现的一些光照效果。
box-shadow实现霓虹文字效果
这种效果也叫Neon。 Codepen 中有很多类似的效果，最常见的是 box-shadow 过渡效果和白色文本叠加：
CodePen Demo -- box-shadow 获得霓虹灯效果 box-shadow 获得霓虹灯效果get light show Shadow
和上面的效果类似，是指各种阴影的过渡效果，也许是一些3D效果？
足够的组合以获得更好的效果：
CodePen Demo -- 使用盒子阴影应用阴影灯光秀
使用投影| box-shadow实现单个标签抖音 LOGO
嗯，既然Title叫CSS阴影技术以及你不知道的细节，那么这篇文章应该也有一些技巧。
我们先来看看。一张标签模仿LOGO抖音。当然，由于仅限于某一要素，所以在细节上还存在很多缺陷。
之所以想复制它，是因为有一天我在浏览抖音时看到了这个LOGO。我写了很多CSS，当我看到一些东西时，我会条件反射地想这是否可以用CSS来完成。
先来看看LOGO抖音：
真的非常简单。主体实际上是由三个不同颜色的J型形状组成。而且选一个的话可以把它分成四分之三圆，|和㇏。
确实，一个元素加两个伪元素只能做出这三种形状。让我们尝试实现以下内容。简单的CSS代码如下：
<div></div> --- div { position: relative; width: 37px; height: 218px; background: #fff; &::before { content: ""; position: absolute; width: 100px; height: 100px; border: 37px solid #fff; border-top: 37px solid transparent; border-radius: 50%; top: 123px; left: -137px; transform: rotate(45deg); } &::after { content: ""; position: absolute; width: 140px; height: 140px; border: 30px solid #fff; border-right: 30px solid transparent; border-top: 30px solid transparent; border-left: 30px solid transparent; top: -100px; right: -172px; border-radius: 100%; transform: rotate(45deg); } } 复制代码
上面的代码可以生成所有形态的主体：
接下来就是filter：drop-shadow()登场。它可以给被渲染元素之前的元素的渲染带来一些效果。最常见的是用它来创建整体阴影。通常用于从对话框和所有对话框中获得小三角阴影效果。如下图，左侧是使用drop-shadow的效果，右侧是使用常规box-shadow效果的效果。
本文假设读者熟悉使用投影的基础知识。上图的效果来自于这里：CodePen Demo -- Drop-shadow vs box-shadow (2) By Kseso
OK，回到我们的正文，我们开始使用 filter: drop-shadow() 在第一层左侧生成蓝色阴影，添加到主div中：
div { position: relative; width: 37px; height: 218px; background: #fff; filter:drop-shadow(-10px -10px 0 #24f6f0); &::before, &::after { ... } } 复制代码
得到如下效果：
好了，接下来我们只需要添加一个红色图层filter：右边的 drop-shadow() 就完成了！
等等！怎么了？正如我上面所说，与木偶相同。 文字阴影可以多层堆叠！但对于单个元素，drop-shadow只能是一层。
也就是说，你不能在div中使用filter：drop-shadow()在另一边产生红色阴影，但幸运的是，我们还有两个伪元素filter： drop-shadow () 和 box-shadow 尚未使用。经过多次尝试：
div { position: relative; width: 37px; height: 218px; background: #fff; filter:drop-shadow(-10px -10px 0 #24f6f0) contrast(150%) brightness(110%); box-shadow: 11.6px 10px 0 0 #fe2d52; &::before { .... filter: drop-shadow(16px 0px 0 #fe2d52); } &::after { .... filter:drop-shadow(14px 0 0 #fe2d52); } } 复制代码
我们在最后一个标签中重用了伪元素中的 div box-shadow 和两个 filter：drop-shadow()，一个限制。结果如下：
CodePen Demo -- 单标签实现抖音LOGO
总结一下：
主要用两个伪元素来获得整体结构，并使用 drop-shadow drop- Shadow 只能是一个阴影层，所以应该多尝试另一个阴影层 -11-9 关于上面的抖音 LOGO，有朋友提醒我只能重叠两个形状。重叠部分为白色，非重叠部分为主色。一开始觉得很复杂，所以就尝试了这个效果。这也可以使用 CSS 混合模式blend-mode 来完成。下面给出实现方法。有兴趣的同学可以看一下。 : CodePen Demo -- 使用 mix-blend-mode 实现抖音 LOGO 当然，关于 CSS 阴影还有很多有趣的技巧和细节，本文限于篇幅，就不一一列举了。一个。作者：chokcoco 来源：掘金