方法：1、使用text-shadow属性，语法“text-shadow: 水平阴影 垂直阴影 模糊距离 颜色;”；2、使用box-shadow属性，语法“box-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 颜色 inset;”。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

方法1：使用text-shadow属性

text-shadow属性用于设置带阴影的文本；可设置阴影的像素长度、宽度和模糊的距离以及阴影的颜色。

语法：

text-shadow: h-shadow v-shadow blur color;

属性值：

h-shadow：设置水平阴影的位置，允许负值。

v-shadow：设置垂直阴影的位置，允许负值。

blur：设置模糊的距离。

color：设置阴影的颜色。

示例：

                                                
文本阴影！
     

方法2：使用box-shadow属性

box-shadow属性可以将阴影应用于文本框，可设置中阴影的像素长度，宽度和模糊的距离以及阴影的颜色。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

属性值：

h-shadow：设置水平阴影的位置，允许负值；必需值，不可省略。

v-shadow：设置垂直阴影的位置，允许负值；必需值，不可省略。

blur：设置模糊距离；可选值，可省略。

spread：设置阴影的大小；可选值，可省略。

color：设置阴影的颜色；可选值，可省略。

inset：设置从外层的阴影（开始时）改变阴影内侧阴影；可选值，可省略。

示例：

（学习视频分享：css视频教程）

以上就是css如何实现阴影效果的详细内容，更多请关注易企推科技其它相关文章！

本文地址：网络知识频道 https://www.hkm168.com/jiqiao/1146833.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！