HTML中怎么制作响应式图片卡片悬浮时的发光边框-html教程-PHP中文网

用box-shadow实现悬浮发光边框的核心写法是：.card-img{transition:box-shadow.3sease;}.card-img:hover{box-shadow:0 0 0 4px rgba(59,130,246,.3),0 0 16px rgba(59,130,246,.5);}，第一层控制粗细，第二层控制扩散，需配合overflow:hidden与响应式适配。

html中怎么制作响应式图片卡片悬浮时的发光边框

用 box-shadow 实现悬浮发光边框的核心写法

直接加 box-shadow 就能实现，但关键在「过渡平滑」和「发光不溢出」。默认卡片如果没设 overflow: hidden，强光阴影可能撑开布局或遮挡相邻元素；另外纯 box-shadow: 0 0 15px #00f 在深色背景上几乎看不见，得配合 inset 或双层阴影增强对比。

推荐写法：

.card-img {
  transition: box-shadow 0.3s ease;
}
.card-img:hover {
  box-shadow: 
    0 0 0 4px rgba(59, 130, 246, 0.3),
    0 0 16px rgba(59, 130, 246, 0.5);
}

第一层是「透明描边」，控制发光粗细；第二层是「柔光扩散」，控制范围和强度。两个值都用 rgba 而非纯色，避免夜间模式下刺眼。

图片卡片容器必须设 overflow: hidden 吗

不是「必须」，但强烈建议。否则 box-shadow 的扩散部分会突破父容器边界，在 flex/grid 布局中造成错位，尤其 Safari 下表现不稳定。

常见问题场景：

卡片用 display: flex 包裹图片，但外层没设 overflow: hidden → 悬浮时右侧阴影被截断或压到隔壁卡片
图片用 object-fit: cover 且宽高比不匹配 → 阴影从裁剪区边缘溢出，视觉上像“光从图里漏出来”

稳妥做法：给卡片最外层容器（比如 <div class="card">）加上 <code>overflow: hidden 和 border-radius，让发光自然收束。

响应式下阴影尺寸怎么适配不同屏幕

不能写死像素值。小屏手机上 16px 光晕显得太重，大屏又不够显眼。用相对单位更可靠：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

用 em：基于当前字体大小缩放，适合图文混排卡片
用 vw：比如 box-shadow: 0 0 calc(0.5vw + 2px) rgba(...)，兼顾基础值和视口比例
媒体查询兜底：在 @media (max-width: 768px) 里把模糊半径减半、描边宽度降到 2px

示例：

@media (max-width: 768px) {
  .card-img:hover {
    box-shadow: 
      0 0 0 2px rgba(59, 130, 246, 0.2),
      0 0 8px rgba(59, 130, 246, 0.3);
  }
}