1. 引言
CSS filter() 函数在前端开发中应用广泛，可以实现照片带有滤镜风格的图片特效。在 CSS3 中引入了 Filter 函数，为开发者提供了一种可以实现图像特效的方式。常见的 CSS filter() 函数有 blur()、brightness()、contrast()、drop-shadow() 等等。在这里，我们将会通过巧妙运用 drop-shadow() 函数的特性来实现线条光影效果。
2. drop-shadow() 函数介绍
drop-shadow() 函数，翻译过来的意思就是“阴影空出”。它可以添加一个投影效果至一个图片或者一个元素身上，使得它看起来有立体感，突出出来。
2.1 注释
drop-shadow() 函数支持的参数有多个，大多数是 color 和 length。如下所示：
drop-shadow( [length || color || color and length || inset? ]+ )
2.2 参数详解
下面是参数的详细说明：
length：它表示投影的位置，例如长度或阴影偏移量。
color：代表的是阴影的颜色。
inset? ：代表如果这个参数有设置为 inset，那么产生的是内阴影，否则，就是外阴影。可以为可选参数。
下面是一个简单的样例代码：
box-shadow: 10px 10px 5px gray;
drop-shadow(10px 10px 5px gray);
/* 这两个方法的阴影都是完全一致的 */
3. 创建线条光影效果
为了实现线条光影效果，我们需要满足以下几个要求：
创建两个 div 元素，方便后续运用 css 光影效果。
两个 div 相同大小，样式上近似，为后面的光影效果进行铺垫。
在第二个 div 元素上，创建线条，同样的也是为下一步的光影效果作铺垫。
字段的设置上，为了突出下一步的阴影效果，可以不设置颜色，除非要达到特殊的视觉效果，不予以介绍。
3.1 HTML 代码
<div class="line"></div>
<div class="line-shadow"></div>
3.2 CSS 代码
* {
margin: 0;
padding: 0;
}
/* 两个 Div 的样式，仅仅是位置不同。 */
.line,.line-shadow {
height: 5px;
width: 200px;
margin: 15px auto;
background-color: #f5f5f5;
}
/* 在上一个 div 元素的基础上，增加了文字提示，并设置其颜色和外边框。*/
.line-shadow {
box-shadow: 0 0 10px 1px rgba(0,0,0,0.1);
text-align: center;
color: #666;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
/* 创建了背景图片，并利用它来实现线条的视觉效果。 */
.line-shadow:before, .line-shadow:after {
content: "";
background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAALUlEQVQI12N/////y8BmOAIu3D5fBQACKAAAxfYD6l0befAAAAAElFTkSuQmCC") repeat-x scroll left top;
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: -1px;
left: -1px;
}
/* 关键部分：增加光影效果。 */
.line-shadow {
filter: drop-shadow(0px 2px 1px rgba(20, 20, 20, .4));
-webkit-filter: drop-shadow(0px 2px 1px rgba(20, 20, 20, .4));
-moz-filter: drop-shadow(0px 2px 1px rgba(20, 20, 20, .4));
-o-filter: drop-shadow(0px 2px 1px rgba(20, 20, 20, .4));
-ms-filter: drop-shadow(0px 2px 1px rgba(20, 20, 20, .4));
}
通过 CSS filter 函数，我们可以为网页元素添加平面阴影和.投射阴影。利用 drop-shadow() 函数，可以轻松地为网页文字或图形等元素创建出立体的阴影效果，而最终的视觉效果也会更加精美。从而，我们可以实现多彩多变的视觉效果，增加网站的视觉表现力，提高用户体验。