本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前言
本篇文章讲述如何使用 CSS 实现阴影效果，作为前端开发工程师这些基础的技巧是一定要掌握的。
一、初识 CSS 阴影
CSS阴影主要的作用是可以让页面中的文字和元素具有立体的效果，从而被突出出来。
两种阴影属性：
box-shadow：用于给元素添加阴影text-shadow：用于给文本添加阴影
ps：还有一个 filter 滤镜的函数drop-shadow()也可以添加阴影，它主要用于给透明图像的非透明部分添加阴影效果。
二、box-shadow属性
2.1 介绍box-shadow属性
-
说明
- 用于在元素的框架上添加阴影效果，还可以在同一个元素上设置多个阴影效果，用逗号隔开。
-
语法
-
box-shadow: OffsetX(水平偏移), OffsetY(垂直偏移), Blur(模糊半径), Spread(扩展距离，阴影的尺寸), Color(阴影颜色), Position(阴影位置，默认在外部(outset));
-
2.2 box-shadow属性的应用
2.2.1 box-shadow属性-基本使用
-
代码示例
-
<style> .box { width: 300px; height: 300px; background-color: yellow; box-shadow: 10px 10px; } </style> <body> <div class="box"></div> </body> -
效果如下
-
2.2.2 box-shadow属性-多重阴影与定向阴影
-
代码示例
-
box-shadow: -5px 0 5px 0px #000, 0 -5px 5px 0px #000; -
效果如下
-
2.2.3 box-shadow属性-模拟边框
-
代码示例
-
box-shadow: 0px 0px 0px 10px #000, 0px 0px 0px 20px red; -
效果如下
-
2.2.4 box-shadow属性-内阴影
-
代码示例
-
box-shadow: 0px 0px 30px 10px red inset; -
效果如下
-
三、text-shadow属性
3.1 介绍text-shadow属性
-
说明
- 为文字添加阴影，也可以添加多个阴影，用逗号隔开。
-
语法
-
text-shadow: OffsetX(水平偏移), OffsetY(垂直偏移), Blur(模糊半径), Color(阴影颜色));
-
-
注意
text-shadow没有扩展距离属性值，阴影位置属性值。
3.2 text-shadow属性的应用
3.2.1 text-shadow属性-基本使用
-
代码示例
-
<style> .box { width: 300px; height: 300px; background-color: yellow; text-shadow: 0px 0px 5px red; } </style> <body> <div class="box">hello world</div> </body> -
效果如下
-
text-shadow属性基本与box-shadow属性一样，就不多举例了
