能,border-radius与box-shadow可直接组合实现发光圆角边框:1.基础用法为border-radius加无偏移、大模糊的box-shadow;2.多层阴影可增强立体感;3.搭配border和background可强化轮廓与清晰度;4.响应式推荐使用百分比或clamp()适配。

用 CSS 的 border-radius 配合 box-shadow 就能轻松实现带发光效果的圆角边框,不需要额外图片或 JavaScript。
1. 基础圆角 + 发光(最常用)
给 <img> 标签直接加样式即可:
<img src="example.jpg" alt="示例图" style=" border-radius: 16px; box-shadow: 0 0 20px rgba(100, 150, 255, 0.7); display: block; ">
-
border-radius: 16px 控制圆角大小,数值越大越圆润(也可写
50%实现正圆) -
box-shadow 中的
0 0 20px表示无偏移、模糊半径 20px,发光柔和;rgba(100, 150, 255, 0.7)是蓝紫色半透光晕 - display: block 避免图片下方默认留白(行内元素特性)
2. 多层发光(更立体)
叠加多个 box-shadow 值,模拟内外光晕:
style="
border-radius: 12px;
box-shadow:
0 0 8px rgba(255, 220, 100, 0.6),
0 0 20px rgba(255, 180, 60, 0.4),
0 0 35px rgba(255, 120, 0, 0.2);
"- 从内到外:小模糊+高透明 → 中模糊+中透明 → 大模糊+低透明,层次更自然
- 颜色建议选主图色调相近色,避免突兀(比如暖图配金橙光,冷图配青蓝光)
3. 带描边的发光圆角(强调轮廓)
先加实色边框,再套发光,突出边界感:
立即学习“前端免费学习笔记(深入)”;
style=" border-radius: 10px; border: 2px solid #fff; box-shadow: 0 0 15px rgba(0, 200, 255, 0.8); background: #fff; /* 可选:防止透明图边缘发虚 */ "
- border 提供清晰白色轮廓,让发光不“漂”在背景上
- background: white 对 PNG 透明图特别有用,避免阴影与背景混色导致发灰
4. 响应式适配小技巧
图片尺寸变化时,让圆角和发光也自适应:
- 用
border-radius: 10%或1em替代固定像素,随容器缩放 - 发光模糊值可配合
clamp():如box-shadow: 0 0 clamp(5px, 3vw, 15px) rgba(0,100,255,0.6) - 对小图慎用大模糊值(如 >30px),易糊成一团光斑



















