CSS3 教程
使用CSS3，您可以将阴影应用于元素上。
使用CSS3阴影
CSS3使您能够像在Photoshop中一样向元素添加阴影效果，而无需使用任何图像。在CSS3之前，切片图像用于在非常烦人的元素周围创建阴影。
下一节将介绍如何在文字和元素上应用阴影。
CSS3 box-shadow属性
box-shadow属性可用于向元素的框中添加阴影。您甚至可以使用逗号分隔的阴影列表应用多个阴影效果。创建盒子阴影的基本语法可以通过以下方式给出：
box-shadow: offset-x offset-y blur-radius color;
该box-shadow属性的组件具有以下含义：
offset-x —设置阴影的水平偏移量。
offset-y —设置阴影的垂直偏移。
blur-radius —设置模糊半径。值越大，模糊越大，阴影的边缘越模糊。不允许使用负值。
color —设置阴影的颜色。如果省略或未指定颜色值，则它将采用color属性的值。
请参考CSS3 box-shadow属性，以了解有关其他可能值的更多信息。
.box{
width: 200px;
height: 150px;
background: #ccc;
box-shadow: 5px 5px 10px #999;
}
注意：添加时box-shadow，如果未指定模糊半径分量的值或将其设置为零（0），则阴影的边缘将变清晰。
同样，您可以使用逗号分隔的列表添加多框阴影：
.box{
width: 200px;
height: 150px;
background: #000;
box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}
CSS3 text-shadow属性
您可以使用text-shadow属性在文本上应用阴影效果。 您还可以使用与box-shadow相同的表示法对文本应用多个阴影。
h1 {
text-shadow: 5px 5px 10px #666;
}
h2 {
text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}
相关视频
24小时阅读榜
精品课程
独孤九贱(2)_CSS视频教程
共22课时
24.3万人学习
独孤九贱(3)_JavaScript视频教程
共28课时
36.2万人学习
独孤九贱(4)_PHP视频教程
共89课时
133.1万人学习
热门下载
phpStudy 2018最新版
集成PHP7，16种组合，超全大合集
下载
vc9-vc14（32+64位）运行库合集（链接在下方）
phpStudy安装所需运行库集合下载
下载
php程序员工具箱完整版
程序员工具箱 v1.0 php集成环境
下载
SublimeText3汉化版
中文版，非常好用
下载
Notepad++ Windows版
Notepad++ 8.9.7 Windows版官方安装包，适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。
下载
phpStudy V8.1（Win64位）（已支持php8）
Win64位，支持php多版本共存
下载