于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于 box-shadow 的用法。

最近一个新的项目，CSS-Inspiration，挖掘了其他很多有关 CSS 阴影的点子，是之前的文章没有覆盖到的新内容，而且有一些很有意思，遂打算再起一篇。

本文的题目是 CSS 阴影技巧与细节。CSS 阴影，却不一定是 box-shadow 与 filter:drop-shadow，为啥？因为使用其他属性也可以模拟阴影，而且是各种各样的阴影。下面且听我娓娓道来~

单侧投影

先说单侧投影，关于 box-shadow，大部分时候，我们使用它都是用来生成一个两侧的投影，或者一个四侧的投影。如下：

OK，那如果要生成一个单侧的投影呢？

我们来看看 box-shadow 的用法定义：

{ box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#}

以 box-shadow: 1px 2px 3px 4px #333 为例，4 个数值的含义分别是，x 方向偏移值、y 方向偏移值 、模糊半径、扩张半径。

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

继续，如果阴影的模糊半径，与负的扩张半径一致，那么我们将看不到任何阴影，因为生成的阴影将被包含在原来的元素之下，除非给它设定一个方向的偏移量。所以这个时候，我们给定一个方向的偏移值，即可实现单侧投影：

CodePen Demo — css单侧投影（https://codepen.io/Chokcoco/pen/pergRb）

投影背景 / 背景动画

接着上面的说。

很明显，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实现背景动画（https://codepen.io/Chokcoco/pen/WaBYZL）

当然，这只是个示例 Demo，运用点想象力还有很多有意思的效果，再贴一个：

CodePen Demo — CSS Checker Illusion( By David Khourshid )（https://codepen.io/davidkpiano/pen/LVzxPV）

嗯，很有意思，就是实际用途可能不大。

立体投影

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

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

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

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

上图 div 只是带了一个非常浅的 bos-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%);}

所以总结一下：

• 立体投影的关键点在于利于伪元素生成一个大小与父元素相近的元素，然后对其进行 rotate 以及定位到合适位置，再赋于阴影操作
• 颜色的运用也很重要，阴影的颜色通常比本身颜色要更深，这里使用 hsl 表示颜色更容易操作，l 控制颜色的明暗度

还有其他很多场景：

CodePen Demo — 立体投影（https://codepen.io/Chokcoco/pen/LgdRKE?editors=1100）

文字立体投影 / 文字长阴影

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

正常而言，我们使用 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：

@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, 10px10px #992400, 11px 11px #992400, 12px 12px #992400, 13px 13px #992400, 14px 14px #992400, 15px15px #992400, 16px 16px #992400, 17px 17px #992400, 18px 18px #992400, 19px 19px #992400, 20px20px #992400, 21px 21px #992400, 22px 22px #992400, 23px 23px #992400, 24px 24px #992400, 25px25px #992400, 26px 26px #992400, 27px 27px #992400, 28px 28px #992400, 29px 29px #992400, 30px30px #992400, 31px 31px #992400, 32px 32px #992400, 33px 33px #992400, 34px 34px #992400, 35px35px #992400, 36px 36px #992400, 37px 37px #992400, 38px 38px #992400, 39px 39px #992400, 40px40px #992400, 41px 41px #992400, 42px 42px #992400, 43px 43px #992400, 44px 44px #992400, 45px45px #992400, 46px 46px #992400, 47px 47px #992400, 48px 48px #992400, 49px 49px #992400, 50px50px #992400;}

看看效果：

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

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

• fade-out 改变颜色的透明度，让颜色更加透明
• desaturate 改变颜色的饱和度值，让颜色更少的饱和

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

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

@function makelongrightshadow($color) { $val: 0px 0px $color; @for $i from 1 through 50 { $color: fade-out(desaturate($color, 1%), .02); $val: #{$val}, #{$i}px #{$i}px #{$color}; } @return $val;}

好，看看最终效果：

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

CodePen Demo — 立体文字阴影（https://codepen.io/Chokcoco/pen/JmgNNa）

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

线性渐变配合阴影实现条纹立体阴影条纹字（https://codepen.io/Chokcoco/pen/XxQJEB?editors=1100）

长投影

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

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

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

CodePen Demo — 线性渐变模拟长阴影（https://codepen.io/Chokcoco/pen/qJvVGy）

彩色投影

通常而言，我们生成阴影的方式大多是 box-shadow 、filter: drop-shadow() 、text-shadow 。但是，使用它们生成的阴影通常只能是单色或者同色系的。

你这么说，难道还可以生成渐变色的阴影不成？

额，当然不行。

这个真不行，但是通过巧妙的利用 filter: blur 模糊滤镜，我们可以假装生成渐变色或者说是颜色丰富的阴影效果。

当然，关于 CSS 阴影还有很多有意思的技巧和细节，本文限于篇幅不再一一罗列。

.时髦的双影

要创建此效果，文本将被赋予两个硬阴影，没有模糊半径。第一个阴影被赋予背景颜色并被放置在文本附近，第二个阴影被赋予文本颜色并且放置的距离大于文本中的第一个阴影。

CSS

color: #dfdfdf;
text-shadow: 4px 4px 0px #000, 
 -4px 0 0px #000,
 7px 4px 0 #fff;

22.彩色阴影

在这个演示中，每个字母都有不同颜色渐变的阴影，使它看起来非常令人印象深刻。

HTML

<p>
 <span id="y">Y</span>
 <span id="o">O</span>
 <span id="u">U</span
</p>

CSS

color: #dfdfdf;
#y {
 text-shadow: 0 1px 2px #75b663,
 1px 3px 1px #5ea04b, 
 2px 5px 1px #5b9c49, 
 4px 7px 1px #518b41, 
 6px 9px 1px #477939,
 8px 11px 1px #3d6831,
 10px 13px 1px #335729,
 12px 15px 1px #294521,
 14px 17px 1px #1e3418;
}
#o {
 text-shadow: 0 1px 2px #9d64c4,
 1px 3px 1px #9759c0, 
 2px 5px 1px #8b46b9, 
 4px 7px 1px #7d3fa6, 
 6px 9px 1px #6f3894,
 8px 11px 1px #613181,
 10px 13px 1px #532a6f,
 12px 15px 1px #45235c,
 14px 17px 1px #381c4a;
}
#u {
 text-shadow: 0 1px 2px #c48564,
 1px 3px 1px #c07d59, 
 2px 5px 1px #b96e46, 
 4px 7px 1px #a6633f, 
 6px 9px 1px #945838,
 8px 11px 1px #814d31,
 10px 13px 1px #6f422a,
 12px 15px 1px #5c3723,
 14px 17px 1px #4a2c1c;
}

3.陷落的文本

实际上，您可以使用CSS使文本看起来像在本演示中所做的那样。它的方向和位置使用transform 属性进行更改， 并给出不同的阴影组，使其看起来更自然。

HTML

<p data-text='FALLEN'>FALLEN</p>

CSS

p {
 transform: skew(40deg)rotate(-10deg)rotateX(50deg)translate3d(0, 0, 0);
 -webkit-perspective: 100px;
 perspective: 100px;
}
p::before {
 text-shadow: 0 2px 3px #747474, 
 -3px 3px 1px #222, 
 -6px 5px 1px #474747, 
 -9px 7px 1px #747474,
 -12px 9px 1px #565656,
 -15px 11px 1px #343434,
 -22px 15px 1px #171717;
}
p:before,
p:after {
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 content: attr(data-text)
}
p:after {
 color: #edc;
}

4.多个彩色阴影

这是通过使用蓝色和粉红色的两个远距离阴影创建的多文本阴影效果的另一个令人印象深刻的示例。

CSS

color: #474747; 
 
text-shadow: 20px 10px 0px #ff99cc,
 -15px -6px 0px #64a5b7; 

5.淘汰文本

这是淘汰文本的一个示例，它允许通过它可以看到它的背景。使用text-shadow 和 mix-blend-mode属性创建此效果 。

渴望了解更多有关淘汰文本的信息？访问链接 如何使用CSS创建Knockout Text 并学习创建不同类型的挖空文本效果。

HTML

<div id="parent">
 <p>Hey there!</p>
</div>

CSS

div {
 background: url('https://www.dl.dropboxusercontent.com/s/rv0tbpx6fmtr4vi/texture.jpg') repeat;
 padding: 10px;
}
p {
 padding: 30px;
 mix-blend-mode: multiply;
 text-shadow: 5px 4px 11px rgb(0,0,0), 0 2px 5px rgb(0,0,0);
 text-align: center;
}

结论

文本阴影在网站中广泛使用，并且很容易实现。您可以直接选择本文中给出的任何文本阴影并增强您的设计。您还可以通过提供不同颜色和其他变化来创建自己的颜色，从这些阴影中获取想法。我们很快就会发布一篇文章，讨论创建这里给出的文本效果的提示和技巧。

整理不易，请大家多多关注支持我，谢谢！

SS3技术提供了大量增强用户界面的属性。这些属性可以对界面元素实现外观和行为上明显的调整。从本篇文章开始，小海前端（头条号）就带领小伙伴们一同学习CSS3关于增强用户界面的属性。

承接文章：CSS技术中一直被遗忘的属性，了解的都已成了Web大神，你知道吗？

技术等级：中级 | 适合有一定的CSS基础的人士阅读。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

CSS3所提供的增强用户界面的属性以及与此相关的属性比较多，小海前端（头条号）将分几次对其进行讲解。所包含的所有增强用户界面的属性包括：

• box-shadow

• box-sizing

• overflow-x

• overflow-y

• resize

• outline

• outline-width

• outline-style

• outline-color

• outline-offset

• pointer-events

• user-select

• appearance

• content

• counter-increment

• counter-reset

• quotes

本篇文章先来为大家讲解第一个增强用户界面属性：块级元素的阴影box-shadow。

一、认识box-shadow属性：

对块级元素实现阴影效果，可以增强块级元素的视觉感受，让整个块级元素有凸显出页面的感觉，是现代页面设计中常用的手法。在代码中，要想对块级元素实现阴影效果，可以使用CSS 3提供的下列属性。

CSS3 技术使用box-shadow属性设置块级元素的阴影

该属性可以通过一系列的取值来综合设置块级元素的阴影效果。W3C规定该属性的取值格式如下：

格式：box-shadow: h-shadow v-shadow blur spread color inset/outset;

上述格式中描述的各个取值的含义如下：

• h-shadow，必须，阴影水平方向的偏移量。

• v-shadow，必须，阴影垂直方向的偏移量。

• blur，阴影的边缘柔滑半径。

• spread，阴影的扩展半径。

• color，阴影的颜色。

• inset/outset，内外阴影切换。

二、设置阴影的偏移量：

box-shadow属性的取值有两个必须要设置的参数，即h-shadow和v-shadow。这两个参数可以取负值。

• 参数h-shadow，取值为正值时，阴影水平向右发生偏移；取值为负值时，阴影水平向左发生偏移。

• 参数v-shadow，取值为正值时，阴影垂直向下发生偏移；取值为负值时，阴影垂直向上发生偏移。

若box-shadow只有这两个参数取值，则可以在块级元素背面产生一个阴影，并发生一定量的位置偏移，但不会产生边缘的柔化效果。

例1：为一个div块级元素设置阴影，水平偏移和垂直偏移均为5px，阴影的边缘柔滑半径为10px，阴影不具备扩展，阴影颜色为#aaaaaa。

div{box-shadow: 5px 5px 10px 0 #aaaaaa;}

请小伙伴们为该div块级元素同时设置背景颜色、边框效果、圆角效果，观察其阴影效果的实现。

当h-shadow和v-shadow两个参数的取值均为0时，就可以为块级元素设置发光效果。若设置发光效果的同时再配合扩展功能，可以让发光效果更加明显。

例2：为一个div块级元素设置发光，阴影的边缘柔滑半径为10px，阴影具备10像素的扩展功能，阴影颜色为#ff5857。

div{box-shadow: 0 0 10px 10px #ff5857;}

上述代码作用在div块级元素上之后的效果如下图所示。

例2的最终显示效果：利用box-shadow属性模拟发光效果

三、设置投影效果与内阴影效果：

box-shadow属性的最后一个参数可以取值为inset或outset，其默认值为outset，表示外阴影，也就是我们看到的“投影”效果。当该参数取值为inset时，阴影将投射到块级元素的内部，被称为“内阴影”效果。

例3：为一个div块级元素设置内阴影，水平偏移和垂直偏移均为5px，阴影的边缘柔滑半径为10px，阴影不具备扩展，阴影颜色为#ff5857。

div{box-shadow: 5px 5px 10px 0 #ff5857 inset;}

上述代码作用在div块级元素上之后的效果如下图所示。

例3的最终显示效果：利用box-shadow属性设置内阴影

四、设置多组阴影效果同时作用

box-shadow属性允许设置多组阴影效果同时作用于一个块级元素。这里，可以利用阴影的水平/垂直偏移量来设置一组阴影只出现在块级元素的一个边方向上，则4个边方向上可以设置四组不同的阴影效果，以达到同时作用的功能。

格式：box-shadow: shadow1,shadow2,shadow3,shadow4;

例4：查看下列CSS代码。

div{

width: 300px; height: 200px;

border: solid 1px #aaaaaa;

border-radius: 15px;

box-shadow: 0 -10px 10px 0 #ff0000,

10px 0 10px 0 #00ff00,

0 10px 10px 0 #0000ff,

-10px 0 10px 0 #ff00ff;

}

上述代码中，为一个div标记设置了宽度和高度，还设置了一个圆角边框。此外，在设置box-shadow属性时，利用逗号隔开了四组阴影属性的取值。该组代码的外观如下图所示。

例4的最终显示效果

这里来分析这四组阴影属性的取值：

（1）第一组：0 -10px 10px 0 #ff0000

这一组为红色（#ff0000）阴影，水平方向不偏移，垂直方向向上偏移10px，最后产生10px的边缘柔滑效果。总之，第一组代码在块级元素的上方形成了红色的阴影。

（2）第二组：10px 0 10px 0 #00ff00

这一组为绿色（#00ff00）阴影，水平方向向右偏移10px，垂直方向不偏移，最后产生10px的边缘柔滑效果。总之，第二组代码在块级元素的右方形成了绿色的阴影。

（3）第三组：0 10px 10px 0 #0000ff

这一组为绿色（#0000ff）阴影，水平方向不偏移，垂直方向向下偏移10px，最后产生10px的边缘柔滑效果。总之，第三组代码在块级元素的下方形成了蓝色的阴影。

（4）第四组：-10px 0 10px 0 #ff00ff

这一组为品红色（#ff00ff）阴影，水平方向向左偏移10px，垂直方向不偏移，最后产生10px的边缘柔滑效果。总之，第四组代码在块级元素的左方形成了品红色的阴影。

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。

文章预告

明天的文章中，继续为大家讲解CSS3中有关增强用户界面的属性。重点为大家讲解box-sizing属性的使用，这将涉及到页面布局时盒模型尺寸的计算方法，希望正在研究页面布局的小伙伴们一定不要错过。