CSS 内发光效果|极客教程

CSS 内发光效果

在网页设计中，内发光效果是一种常用的装饰效果，通过在元素内部产生发光的效果，使页面看起来更加生动和吸引人。本文将详细介绍如何利用 CSS 实现内发光效果。

1. box-shadow属性

在 CSS 中，可以利用 box-shadow 属性来实现阴影效果，包括内阴影效果。通过设置 inset 关键字可以实现内阴影效果，其基本语法如下：

box-shadow: inset x-offset y-offset blur spread color;

inset：用于指定内阴影效果。
x-offset：设置阴影距离左边框的水平距离，可以为负值。
y-offset：设置阴影距离上边框的垂直距离，可以为负值。
blur：设置阴影的模糊半径，值越大阴影越模糊。
spread：设置阴影的大小。
color：设置阴影的颜色。

2. 实现内发光效果

2.1 使用单个内发光效果

首先，我们通过以下示例代码实现一个元素的内发光效果：

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

在上述代码中，我们创建了一个宽度为200px，高度为100px的元素，并设置了背景颜色为灰色。通过设置 box-shadow 属性，我们实现了一个蓝色的内发光效果。在 box-shadow 中，inset 关键字表示内阴影效果，0 0 表示阴影距离左边框和上边框的距离为0，10px 表示阴影的模糊半径为10px，#09f 表示阴影的颜色为蓝色。

2.2 使用多个内发光效果

除了使用单个内发光效果外，我们还可以通过设置多个不同参数的 box-shadow 属性来实现多重内发光效果。以下是一个使用多个内发光效果的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inner Glow Effect</title>
<style>
.multiple-inner-glow {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    box-shadow: inset 0 0 10px 0 #09f,
                inset 0 0 20px 5px #f90,
                inset 0 0 30px 10px #0c0;
}
</style>
</head>
<body>
<div class="multiple-inner-glow"></div>
</body>
</html>

在上述代码中，我们创建了一个宽度为200px，高度为200px的元素，并设置了灰色背景。通过设置多个 box-shadow 属性，我们实现了三个不同颜色和大小的内发光效果。每个 box-shadow 属性之间用逗号分隔。