这篇博客介绍了HTML5中如何使用`text-shadow`属性为文字添加阴影效果，以及CSS3的`box-shadow`属性如何为元素添加盒子阴影。通过示例代码展示了不同参数设置对阴影的影响，包括x轴、y轴位置、模糊距离和颜色等。文章还包含了实际的HTML和CSS代码片段以辅助理解。
文字阴影
text-shadow：
定义：设置文本阴影的效果
语法：text-shadow：x轴方向的位置【向右的】 y轴的位置【向下的】 模糊距离 颜色【默认跟文本的颜色一样】
有两个必须的属性值：x方向的位置 y轴的方向 【可以是负值】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
text-shadow: 10px 5px 5px rebeccapurple;
color:orangered;
font-size: 45px;
text-align: center;
}
</style>
<body>
<p>北京欢迎您</p>
</body>
</html>
盒子阴影
box-shadow
定义：设置盒子的阴影效果
语法：box-shadow: x轴方向的位置 y轴的位置模糊距离 模糊大小 颜色 内外阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="U
最低0.47元/天 解锁文章
扫一扫
118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
