CSS 发光|极客教程

CSS 发光

在网页设计中，CSS 发光效果是一种常见的设计技巧，可以为页面元素增添视觉吸引力。通过使用 CSS 的 box-shadow 属性或 text-shadow 属性，我们可以轻松实现各种发光效果。本文将详细介绍如何使用 CSS 实现不同类型的发光效果，并提供示例代码供参考。

1. box-shadow 属性实现发光效果

box-shadow 属性可以为元素添加阴影效果，通过调整阴影的颜色、模糊度和偏移量等参数，我们可以实现不同类型的发光效果。下面是一些常见的发光效果示例：

1.1. 实现简单的发光效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Glow Effect</title>
<style>
.glow {
    width: 200px;
    height: 50px;
    background-color: #f0f;
    box-shadow: 0 0 10px #fff;
}
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>

Output:

CSS 发光

在上面的示例中，我们为一个 div 元素添加了一个简单的发光效果，阴影颜色为白色，模糊度为 10px。

1.2. 实现多重发光效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multilayer Glow Effect</title>
<style>
.glow {
    width: 200px;
    height: 50px;
    background-color: #f0f;
    box-shadow: 0 0 10px #fff, 0 0 20px #ff0, 0 0 30px #f00;
}
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>

Output:

CSS 发光

在上面的示例中，我们为一个 div 元素添加了多重发光效果，分别使用了三个不同颜色和模糊度的阴影。

1.3. 实现发光边框效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Glow Border Effect</title>
<style>
.glow {
    width: 200px;
    height: 50px;
    border: 2px solid transparent;
    border-radius: 5px;
    background-color: #f0f;
    box-shadow: 0 0 10px #fff, 0 0 20px #ff0, 0 0 30px #f00;
}
</style>
</head>
<body>
<div class="glow"></div>
</body>
</html>

Output:

CSS 发光

在上面的示例中，我们为一个 div 元素实现了发光边框效果，通过设置透明的边框和多重阴影效果来实现。

2. text-shadow 属性实现文字发光效果

除了为元素添加发光效果，我们还可以使用 text-shadow 属性为文字添加发光效果。下面是一些示例代码：

2.1. 实现简单的文字发光效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Text Glow Effect</title>
<style>
.glow {
    font-size: 24px;
    color: #f00;
    text-shadow: 0 0 10px #fff;
}
</style>
</head>
<body>
<p class="glow">Geek-docs.com</p>
</body>
</html>

Output:

CSS 发光

在上面的示例中，我们为一个段落元素的文字添加了一个简单的发光效果，阴影颜色为白色，模糊度为 10px。

2.2. 实现彩虹文字发光效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rainbow Text Glow Effect</title>
<style>
.glow {
    font-size: 24px;
    color: #f00;
    text-shadow: 0 0 10px #f00, 0 0 20px #ff0, 0 0 30px #0f0, 0 0 40px #0ff, 0 0 50px #00f, 0 0 60px #f0f;
}
</style>
</head>
<body>
<p class="glow">Geek-docs.com</p>
</body>
</html>

Output:

CSS 发光

在上面的示例中，我们为一个段落元素的文字实现了彩虹色的发光效果，通过设置多重阴影效果来实现。

2.3. 实现闪烁文字发光效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blinking Text Glow Effect</title>
<style>
@keyframes blink {
    0% { text-shadow: 0 0 10px #fff; }
    50% { text-shadow: none; }
    100% { text-shadow: 0 0 10px #fff; }
}

.glow {
    font-size: 24px;
    color: #f00;
    animation: blink 1s infinite;
}
</style>
</head>
<body>
<p class="glow">Geek-docs.com</p>
</body>
</html>

Output:

CSS 发光