广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

如何使用CSS实现更加立体的阴影效果？下面本篇文章给大家聊聊CSS 阴影进阶，介绍一下巧用使用CSS实现立体阴影效果的方法，希望对大家有所帮助！

CSS 阴影的存在，让物体看上去更加有型立体。【推荐学习：css视频教程】

然而，在最简单的阴影使用之上，我们可以实现更多有意思且更加立体的阴影效果。

CSS 中，明面上可以实现阴影的有三个属性：

关于它们的基础语法和使用就不过多描述，这一部分大家可以先在 MDN 补齐，贴几张图快速复习一下：

box-shadow - 盒阴影：

text-shadow - 文字阴影：

filter: drop-shaodw() - 滤镜内的阴影：

基本上 3 种阴影大同小异，需要注意的就是：

上面提到了通过多层阴影叠加实现文字的立体阴影。运用在 div 这些容器上也是可以的。当然这里还有一种挺有意思的方法。假设我们，有一个矩形元素，希望给他添加一个长投影，像下面这样：

要生成这种长投影，刚刚说的叠加多层阴影可以，再就是借助元素的两个伪元素，其实上面的图是这样的：

关键点在于，我们通过对两个伪元素的 transform: skew() 变换以及从实色到透明色的背景色变化，实现了长投影的效果：

CodePen Demo -- 线性渐变模拟长阴影

https://codepen.io/Chokcoco/pen/qJvVGy

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

这个说法很奇怪，阴影的出现，本就是为了让原本的元素看起来更加的立体，那这里所谓的立体投影，是个怎么立体法？

这里所谓的立体投影，并不一定是使用了 box-shadow、text-shadow 或者 drop-shadow，而是我们使用其他元素或者属性模拟元素的阴影。而这样做的目的，是为了能够突破 box-shadow 这类元素的一些定位局限。让阴影的位置、大小、模糊度可以更加的灵活。

OK，让我们来看看，这样一个元素，我们希望通过自定义阴影的位置，让它更加立体：

上图 div 只是带了一个非常浅的 box-shadow ，看上去和立体没什么关系，接下来，我们通过 div 的伪元素，给它生成一个和原图边角形状类似的图形，再通过 transform 位移一下，可能是这样：

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%);}

所以总结一下：

还有其他很多场景，都可以用类似的技巧实现：

详细完整的代码，你可以戳这里：CodePen Demo -- 立体投影

https://codepen.io/Chokcoco/pen/LgdRKE?editors=1100

还有一类立体效果的阴影就是浮雕阴影，它的本质还是 box-shadow 和 text-shadow，只是需要控制好颜色的配合以及内外阴影的一起使用。核心就是 2 点：

背景色与内容（文本或者盒子颜色）一致

使用两个相反的方向，使用两组对比明显的颜色值，来实现凹凸效果。

首先，我们来看一个文字版的浮雕效果。

先实现一个凸起的效果，我们需要实现一个背景色和文字色一样的文字：

<div>浮雕阴影</div>

body {    background: #999;}div {    color: #999;}

效果如下，由于背景色和文字色的颜色一样，所以我们什么都看不到。

不过没事，我们给文字添加一个 1px x、y 方向的黑色阴影：

div {    color: #999;    text-shadow: 1px 1px 1px #000;}

效果如下：

有点感觉了，再反向，也就是 -1px x、y 方向添加一个黑色相对，也就白色的阴影：

div {    color: #999;    text-shadow:         1px 1px 1px #000,         -1px -1px 1px #fff;}

效果如下，这样我们就得到了一个凸起质感的浮雕阴影：

如果我们把颜色对调一下呢？

div {    color: #999;    text-shadow:         1px 1px 1px #fff,         -1px -1px 1px #000;}

就能很轻松的得到凹下质感的浮雕阴影：

上述 DEMO 的完整代码：CodePen Demo - Embossed Shadow

https://codepen.io/Chokcoco/pen/yLPmMXM

我们将运用在文字上的技巧，扩展延伸到容器上，就能得到最近比较火的拟态风格阴影，其原理也是大同小异。

两个阴影，使用两个相反的方向，使用两组对比明显的颜色值，来实现凹凸效果。与文字不同的是，这里的凹效果，我们需要使用盒子的内阴影实现。

<div>浮雕阴影</div><div>浮雕阴影</div>

div {    width: 120px;    height: 120px;    background: #e9ecef;    color: #333;    box-shadow:        7px 7px 12px rgba(0, 0, 0, .4),        -7px -7px 12px rgba(255, 255, 255, .9);}div:nth-child(2) {    box-shadow:        inset -7px -7px 12px rgba(255, 255, 255, .9),        inset 7px 7px 12px rgba(0, 0, 0, .4);}

这样，就可以得到拟态风格的按钮，如下图所示，左凸右凹：

再通过一个简单的过渡，就可以实现整个点击的交互：

div {    transition: .2s all;    box-shadow:        7px 7px 12px rgba(0, 0, 0, .4),        -7px -7px 12px rgba(255, 255, 255, .9),        inset 0 0 0x rgba(255, 255, 255, .9),        inset 0 0 0 rgba(0, 0, 0, .4);        &:active {        box-shadow:            0 0 0 rgba(0, 0, 0, .4),            0 0 0 rgba(255, 255, 255, .9),            inset -7px -7px 12px rgba(255, 255, 255, .9),            inset 7px 7px 12px rgba(0, 0, 0, .4);    }}

看看效果：

上面的立体效果在文字上就完全不适用了，所以对待文字的立体阴影效果，还需要另辟蹊径。

正常而言，我们使用 text-shadow 来生成文字阴影，像这样：

<div> Txt Shadow</div>-----div {    text-shadow: 6px 6px 3px hsla(14, 100%, 30%, 1);}

嗯，挺好的，就是不够立体。那么要做到立体文字阴影，最常见的方法就是使用多层文字阴影叠加。

Tips：和 box-shadow 一样，text-shadow 是可以叠加多层的！但是对于单个元素而言， drop-shadow 的话就只能是一层。

好，上面的文字，我们试着叠加个 50 层文字阴影试一下。额，50 层手写，其实很快的~

好吧，手写真的太慢了，还容易出错，所以这里我们需要借助一下 SASS/LESS 帮忙，写一个生成 50 层阴影的 function 就好，我们每向右和向下偏移 1px，生成一层 text-shadow：

<div>浮雕阴影</div>0

上面的 SCSS 代码。经过编译后，就会生成如下 CSS：

<div>浮雕阴影</div>1

看看效果：

额，很不错，很立体。但是，就是丑，而且说不上来的奇怪。

问题出在哪里呢，阴影其实是存在明暗度和透明度的变化的，所以，对于渐进的每一层文字阴影，明暗度和透明度应该都是不断变化的。这个需求，SASS 可以很好的实现，下面是两个 SASS 颜色函数：

关于 SASS 颜色函数，可以看看这里：Sass基础—颜色函数

我们使用上面两个 SASS 颜色函数修改一下我们的 CSS 代码，主要是修改上面的 makeLongShadow function 函数：

<div>浮雕阴影</div>2

好，看看最终效果：

嗯，大功告成，这次顺眼了很多~

详细完整的代码，你可以戳这里：CodePen Demo -- 立体文字阴影

https://codepen.io/Chokcoco/pen/JmgNNa

当然，使用 CSS 生成立体文字阴影的方法还有很多，下面再贴出一例，使用了透明色叠加底色的多重线性渐变实现的文字立体阴影，感兴趣的同学可以去看看具体实现：

详细完整的代码，你可以戳这里：CodePen Demo -- 线性渐变配合阴影实现条纹立体阴影条纹字

https://codepen.io/Chokcoco/pen/XxQJEB?editors=1100

（学习视频分享：web前端入门）

以上就是聊聊如何使用CSS实现比普通阴影更加立体的阴影效果！的详细内容，更多请关注9543建站博客其它相关文章！