CSS div 阴影|极客教程

CSS div 阴影

在网页设计中，阴影效果是一种常见的装饰效果，可以让页面元素更加立体和吸引人。在 CSS 中，我们可以通过 box-shadow 属性来为 div 元素添加阴影效果。本文将详细介绍如何使用 CSS 来为 div 元素添加不同类型的阴影效果。

1. 添加简单的阴影

首先，我们来看如何为一个 div 元素添加简单的阴影效果。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Shadow</title>
<style>
    .shadow {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        box-shadow: 5px 5px 10px #888888;
    }
</style>
</head>
<body>
<div class="shadow"></div>
</body>
</html>

Output:

CSS div 阴影

在上面的示例代码中，我们为一个 div 元素添加了一个简单的阴影效果。box-shadow 属性的值由四个部分组成，分别是水平偏移量、垂直偏移量、模糊半径和阴影颜色。在这个例子中，阴影的水平偏移量为 5px，垂直偏移量为 5px，模糊半径为 10px，阴影颜色为 #888888。

2. 添加多重阴影

除了添加单一的阴影效果，我们还可以为一个 div 元素添加多重阴影效果。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Shadows</title>
<style>
    .shadow {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        box-shadow: 5px 5px 10px #888888, -5px -5px 10px #cccccc;
    }
</style>
</head>
<body>
<div class="shadow"></div>
</body>
</html>

Output:

CSS div 阴影

在上面的示例代码中，我们为一个 div 元素添加了两个不同方向的阴影效果。第一个阴影效果的水平偏移量为 5px，垂直偏移量为 5px，模糊半径为 10px，阴影颜色为 #888888；第二个阴影效果的水平偏移量为 -5px，垂直偏移量为 -5px，模糊半径为 10px，阴影颜色为 #cccccc。

3. 添加内部阴影

除了在 div 元素的外部添加阴影效果，我们还可以在 div 元素的内部添加阴影效果。下面是一个示例代码：

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

Output:

CSS div 阴影

在上面的示例代码中，我们为一个 div 元素添加了一个内部阴影效果。通过在 box-shadow 属性值前面添加 inset 关键字，可以将阴影效果设置为内部阴影。

4. 添加边框阴影

除了在 div 元素的内容区域添加阴影效果，我们还可以为 div 元素的边框添加阴影效果。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Shadow</title>
<style>
    .shadow {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        border: 1px solid #cccccc;
        box-shadow: 5px 5px 10px #888888;
    }
</style>
</head>
<body>
<div class="shadow"></div>
</body>
</html>

Output:

CSS div 阴影

在上面的示例代码中，我们为一个 div 元素的边框添加了阴影效果。通过为 div 元素设置 border 属性，然后再使用 box-shadow 属性为边框添加阴影效果。

5. 添加阴影效果的动画

最后，我们可以为 div 元素的阴影效果添加动画效果，使页面元素更加生动。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow Animation</title>
<style>
    .shadow {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        box-shadow: 5px 5px 10px #888888;
        transition: box-shadow 0.5s;
    }

    .shadow:hover {
        box-shadow: 10px 10px 20px #888888;
    }
</style>
</head>
<body>
<div class="shadow"></div>
</body>
</html>

Output:

CSS div 阴影