html如何添加光影

在HTML中添加光影效果，可以让网页设计更具吸引力，要实现这一效果，我们可以使用CSS3中的阴影属性，下面,我将详细介绍如何在HTML中添加光影效果。

我们可以使用text-shadow属性为文字添加阴影。text-shadow属性可以设置阴影的偏移量、模糊程度、颜色等,以下是一个简单的例子：

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字阴影示例</title>
    <style>
        .text-shadow {
            font-size: 24px;
            text-shadow: 2px 2px 2px #000;
        }
    </style>
</head>
<body>
    <div class="text-shadow">这是一个带阴影的文字</div>
</body>
</html>

在这个例子中，text-shadow属性设置了阴影的水平和垂直偏移量（2px）、模糊程度（2px）和颜色（#000，黑色）。

我们来为盒子添加阴影，CSS3中的box-shadow属性可以实现这一效果。box-shadow属性同样可以设置阴影的偏移量、模糊程度、颜色等,还可以设置阴影的扩散距离和内阴影。

以下是一个盒子阴影的例子：

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子阴影示例</title>
    <style>
        .box-shadow {
            width: 200px;
            height: 200px;
            background-color: #f00;
            box-shadow: 10px 10px 5px #888;
        }
    </style>
</head>
<body>
    <div class="box-shadow"></div>
</body>
</html>

在这个例子中，box-shadow属性设置了阴影的水平和垂直偏移量（10px）、模糊程度（5px）、颜色（#888，灰色）。

以下是一些关于box-shadow属性的详细说明：

阴影偏移量：第一个值表示水平偏移量，第二个值表示垂直偏移量，正值表示向右和向下偏移,负值表示向左和向上偏移。
模糊程度：第三个值表示阴影的模糊程度，值越大,阴影越模糊。
阴影颜色：可以使用颜色名、十六进制、RGB、RGBA等多种方式表示。
扩散距离：可选，第四个值表示阴影的扩散距离，正值表示阴影扩大,负值表示阴影缩小。
内阴影：在阴影前添加inset关键字,表示内阴影。

以下是一个包含内阴影的例子：

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内阴影示例</title>
    <style>
        .box-shadow {
            width: 200px;
            height: 200px;
            background-color: #f00;
            box-shadow: inset 10px 10px 5px #888;
        }
    </style>
</head>
<body>
    <div class="box-shadow"></div>
</body>
</html>