使用 HTML 和 CSS 为图像添加发光效果

htmlcssweb developmentfront end technology更新于 2025/4/20 8:12:17

您可能在浏览大多数网站时都见过各种特殊效果，这些效果可以在您的光标悬停在各种图像上时查看。我们将在本文中处理这些效果。这些图像可以作为我们网站的名片。

本文中我们将执行的任务是使用 HTML 和 CSS 为图像添加发光效果。此任务可以通过使用 box-shadow 属性来完成。让我们深入研究本文，了解更多关于应用发光效果的信息。

使用 box-shadow 属性

box-shadow 属性允许您从几乎任何元素的框架投射阴影。如果在带有框阴影的元素上指定了 border-radius，框阴影也会采用相同的圆角。

语法

以下是 box-shadow 属性的语法

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

为了更好地了解如何使用 HTML 和 CSS 将发光效果应用于图像，让我们看一下以下示例。

示例

在下面的示例中，我们将从本地主机上传图像，并使用 box-shadow 属性对其应用效果。

<!DOCTYPE html>
<html>
<head>
   <style>
      .tutorial {
         width: 300px;
         height: 150px;
         margin-left: 60px;
         border-radius: 10%;
      }
      .tutorial:hover {
         box-shadow: 0 0 100px #00FF00;
      }
   </style>
</head>
<body>
   <div class="container">
      <img class="tutorial" src="https://www.cainiaomax.com/images/logo.png" alt="LOGO" />
   </div>
</body>
</html>

执行上述代码后，它将生成一个由网页上的图像组成的输出。当用户将光标放在图像上时，它会在图像的边框上显示效果。

示例

请考虑以下示例，其中我们将使用负扩展半径的 box-shadow 属性。

<!DOCTYPE html>
<html>
<head>
   <style>
      #tutorial {
         background-color: #E5E8E8;
         height: 40px;
         width: 100px;
         padding: 30px;
      }

      img {
         border-radius: 15%;
         width: 120px;
         box-shadow: 0 8px 6px -2px #8E44AD;
      }
   </style>
</head>
<body>
   <div id='tutorial'>
      <img src='https://www.cainiaomax.com/images/logo.png' />
   </div>
</body>
</html>

运行上述代码后，将弹出输出窗口，在网页上显示图片，并在图片的一侧显示负扩展半径引起的效果。

示例

让我们看下面的示例，我们将在图片内部应用一个效果，并借助"inset"来实现。

<!DOCTYPE html>
<html>
<head>
   <style>
      .tutorial {
         width: 350px;
         height: 250px;
         margin-left: 60px;
         border-radius: 10%;
         box-shadow: inset 0 0 60px #85C1E9;
      }
   </style>
</head>
<body>
   <div>
      <img class="tutorial" src="https://www.cainiaomax.com/images/logo.png">
   </div>
</body>
</html>

执行上述代码后，将生成输出，在网页上显示图像以及应用的内阴影效果。

示例

以下示例将在光标置于图像上时关闭图像效果。

<!DOCTYPE html>
<html>
<head>
   <style>
      .image {
         width: 800px;
         height: 200px;
         margin: 5px;
         position: relative;
         box-shadow: 0px 0px 10px (#52BE80, 80%);
         background-size: cover !important;

         &::after {
            width: 100%;
            height: 100%;
            border-radius: 50px;
            position: absolute;
            content: '';
            background: inherit;
         }

         &:hover::after {
            transform: scale(0.5);
            opacity: 0;
         }
      }

      .image:nth-of-type(1) {
         background: url('https://www.cainiaomax.com/images/logo.png')
      }
   </style>
</head>
<body>
   <div class="image"></div>
</body>
</html>

运行上述程序后，会弹出输出窗口，显示上传到网页的图片，图片颜色会变暗。当用户尝试将光标放在图片上时，图片会失去原有的效果，看起来像正常图片一样。