CSS 投影|极客教程

CSS 投影

在网页设计中，投影效果是一种常见的设计技巧，可以为元素增加立体感和层次感。在 CSS 中，我们可以通过 box-shadow 属性来实现投影效果。本文将详细介绍 CSS 投影的相关知识，并提供多个示例代码供参考。

1. 基本语法

box-shadow 属性用于为元素添加投影效果，其基本语法如下：

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：水平偏移量，可以为正值（向右偏移）或负值（向左偏移）。
v-shadow：垂直偏移量，可以为正值（向下偏移）或负值（向上偏移）。
blur：模糊半径，值越大投影越模糊。
spread：阴影的尺寸，可以为正值（扩大阴影）或负值（缩小阴影）。
color：阴影颜色，可以使用颜色值或关键字。
inset：可选值，表示投影为内阴影。

2. 示例代码

2.1 添加简单投影

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

Output:

CSS 投影

在上面的示例中，我们为一个 div 元素添加了简单的投影效果，投影为向右下方偏移 5px，模糊半径为 10px，颜色为 #888888。

2.2 添加内阴影

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inset Box Shadow</title>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        box-shadow: inset 5px 5px 10px #888888;
    }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

Output:

CSS 投影

在上面的示例中，我们为一个 div 元素添加了内阴影效果，投影为向右下方偏移 5px，模糊半径为 10px，颜色为 #888888。

2.3 多重投影

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

Output:

CSS 投影

在上面的示例中，我们为一个 div 元素添加了多重投影效果，分别为向右下方和向左上方偏移 5px，模糊半径为 10px，颜色分别为 #888888 和 #cccccc。

2.4 模糊投影

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blur Box Shadow</title>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        box-shadow: 5px 5px 20px #888888;
    }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

Output:

CSS 投影

在上面的示例中，我们为一个 div 元素添加了模糊投影效果，投影为向右下方偏移 5px，模糊半径为 20px，颜色为 #888888。

2.5 扩大投影

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spread Box Shadow</title>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        box-shadow: 5px 5px 10px 10px #888888;
    }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>