文章内容
一、CSS实现阴影效果的方法
- 1、使用text-shadow属性，可以设置带阴影的文本，实现文字阴影效果；
- 2、使用box-shadow属性，可以将阴影应用于文本框，实现边框阴影效果。
二、方法1：使用text-shadow属性实现文字阴影效果
text-shadow属性用于设置带阴影的文本；可设置阴影的像素长度、宽度和模糊的距离以及阴影的颜色。
1、语法
text-shadow: h-shadow v-shadow blur color;
2、属性值
- h-shadow：设置水平阴影的位置，允许负值。
- v-shadow：设置垂直阴影的位置，允许负值。
- blur：设置模糊的距离。
- color：设置阴影的颜色。
3、示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css设置文本阴影效果</title>
<style>
h1 {
color: red;
text-shadow: 3px 5px 5px #656B79;
}
</style>
</head>
<body>
<h1>文本阴影！</h1>
</body>
</html>
4、效果图
三、方法2：使用box-shadow属性实现边框阴影效果
box-shadow属性可以将阴影应用于文本框，可设置中阴影的像素长度，宽度和模糊的距离以及阴影的颜色。
1、语法
box-shadow: h-shadow v-shadow blur spread color inset;
2、属性值
- h-shadow：设置水平阴影的位置，允许负值；必需值，不可省略。
- v-shadow：设置垂直阴影的位置，允许负值；必需值，不可省略。
- blur：设置模糊距离；可选值，可省略。
- spread：设置阴影的大小；可选值，可省略。
- color：设置阴影的颜色；可选值，可省略。
- inset：设置从外层的阴影（开始时）改变阴影内侧阴影；可选值，可省略。
3、示例
<head>
<meta charset="UTF-8">
<title>css设置边框阴影效果</title>
<style>
div{
width:300px;
height:100px;
background-color:red;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div>边框阴影！</div>
</body>
4、效果图
