正文

如何用CSS轻松打造炫酷文字与图片发光阴影效果

/0 浏览量
0712

在网页设计中，文字和图片的发光阴影效果可以显著提升视觉效果，使页面看起来更加生动和吸引人。以下是一些简单而实用的CSS技巧，帮助你轻松打造炫酷的文字与图片发光阴影效果。

一、文字发光效果

1. 使用文本阴影（text-shadow）

文本阴影是CSS中最简单实现文字发光效果的方法。通过调整阴影的偏移量、模糊半径和颜色，可以创造出不同的发光效果。

.example-text {
  font-size: 48px;
  color: #fff;
  text-shadow: 0 0 10px #ff0, 0 0 20px #ff0, 0 0 30px #ff0, 0 0 40px #ff0;
}

2. 使用径向渐变（radial-gradient）

通过径向渐变，可以创建一个从文字中心向外发散的光环效果。

.example-text {
  font-size: 48px;
  color: transparent;
  background: radial-gradient(circle, #ff0 0%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

二、图片发光效果

1. 使用图片阴影（box-shadow）

给图片添加阴影，可以使其看起来像是在发光。

.example-image {
  width: 200px;
  height: auto;
  box-shadow: 0 0 10px #ff0, 0 0 20px #ff0, 0 0 30px #ff0, 0 0 40px #ff0;
}

2. 使用CSS滤镜（filter）

CSS的filter属性可以用来给图片添加各种效果，包括发光效果。

.example-image {
  width: 200px;
  height: auto;
  filter: brightness(1.5) contrast(1.5);
}

3. 使用径向渐变（radial-gradient）

与文字类似，使用径向渐变也可以给图片添加发光效果。

.example-image {
  width: 200px;
  height: auto;
  background: radial-gradient(circle, #ff0 0%, #fff 100%);
  -webkit-background-clip: content-box;
  background-clip: content-box;
  -webkit-filter: drop-shadow(0 0 10px #ff0);
          filter: drop-shadow(0 0 10px #ff0);
}

三、阴影效果的综合运用

在实际应用中，可以将文字和图片的发光阴影效果结合起来，创造出更加丰富的视觉效果。

.example-container {
  position: relative;
  display: inline-block;
}

.example-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, #ff0 0%, #fff 100%);
  z-index: -1;
}

.example-text {
  font-size: 48px;
  color: #fff;
  text-shadow: 0 0 10px #ff0, 0 0 20px #ff0, 0 0 30px #ff0, 0 0 40px #ff0;
}

.example-image {
  width: 200px;
  height: auto;
  box-shadow: 0 0 10px #ff0, 0 0 20px #ff0, 0 0 30px #ff0, 0 0 40px #ff0;
}

通过以上方法，你可以轻松地在网页中实现炫酷的文字与图片发光阴影效果。当然，这些只是一些基础的技巧，你可以根据自己的需求进行创意发挥，创造出更多有趣的效果。

-- 展开阅读全文 --