数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何创建 CSS3 盒阴影和文本阴影效果？
要创建 CSS3 盒阴影和文本阴影效果，分别使用 `box-shadow` 和 `text-shadow` 属性。让我们通过示例逐一了解它们。
文本阴影
要向文本添加阴影，请使用 `text-shadow` 属性。让我们看看语法：
text-shadow: value
上述值可以是：
h-shadow - 设置水平阴影的位置。
v-shadow - 设置垂直阴影的位置。
blur-radius - 设置模糊半径。
color - 设置阴影的颜色。
创建文本阴影
让我们看一个创建文本阴影的示例：
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-shadow: 2px 2px blue;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Check the shadow of this text.</h2>
</body>
</html>
创建具有模糊效果的文本阴影
让我们看一个创建具有模糊效果的文本阴影的示例。第三个参数设置为模糊半径：
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-shadow: 2px 2px 5px blue;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Check the shadow of this text with the blur effect.</h2>
</body>
</html>
盒阴影
要将阴影设置到网页上的元素，请使用 `box-shadow` 属性。让我们看看语法：
box-shadow: value
上述值可以是：
h-offset - 设置阴影的水平偏移。
v-offset - 设置阴影的垂直偏移。
blur - 设置模糊半径。
spread - 设置扩展半径
color - 设置阴影的颜色。
添加盒阴影
让我们看一个添加盒阴影的示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: white;
text-align: center;
width: 150px;
height: 150px;
background-color: red;
box-shadow: 8px 8px blue;
}
</style>
</head>
<body>
<h1>Shadow effect example</h1>
<div>
BOX SHADOW
</div>
</body>
</html>
添加具有模糊半径的盒阴影
让我们看一个添加具有模糊半径的盒阴影的示例。第三个参数设置为模糊半径：
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: white;
text-align: center;
width: 150px;
height: 150px;
background-color: red;
box-shadow: 8px 2px 8px rgb(89, 0, 255);
}
</style>
</head>
<body>
<h1>Shadow effect example</h1>
<div>
BOX SHADOW
</div>
</body>
</html>
添加具有模糊和扩展半径的盒阴影
让我们看一个添加具有模糊半径的盒阴影的示例。第三个参数设置为模糊半径，第四个参数设置为扩展半径：
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: white;
text-align: center;
width: 150px;
height: 150px;
background-color: blue;
box-shadow: 8px 2px 8px 7px yellow;
}
</style>
</head>
<body>
<h1>Shadow effect example</h1>
<div>
BOX SHADOW
</div>
</body>
</html>
更新于：2023年12月14日
170 次浏览
广告