零基础学习用HTML编辑网页制作一个带渐变倒影的图片展示-html教程-PHP中文网

不能用 -webkit-box-reflect，因其从未进入css标准，chrome/edge自2017年、safari 15.4+已移除；推荐伪元素+transform:scaley(-1)+clip-path方案，兼容性好且可控。

零基础学习用html编辑网页制作一个带渐变倒影的图片展示

直接用 -webkit-box-reflect 写出来效果看起来对，但上线后在 Chrome、Edge、Firefox 甚至 Safari 15.4+ 上全都不显示——它早就不是可用方案了。

为什么不能用 `-webkit-box-reflect` 做倒影

这个属性从没进过 CSS 标准，纯属 WebKit 早期实验性私货。Chrome 和 Edge 自 2017 年起就移除了支持，Safari 15.4（2021 年底发布）也彻底砍掉。现在写进去，开发者工具里直接标为无效声明，getComputedStyle(el).webkitBoxReflect 返回 undefined，控制台也不报错，就是啥都不干。

常见误判点：

看到老教程里“一行代码实现倒影”，照抄后本地 Safari 14 能跑，就以为 OK —— 实际用户大概率用的是 Safari 16+ 或 Chrome 110+
把 -webkit-box-reflect 和 linear-gradient 搭配着写，以为渐变能兜底 —— 渐变只作用于反射层，反射层本身都没了，渐变自然无效

用伪元素 + `transform: scaleY(-1)` 最稳妥

这是零基础可上手、兼容性最好、DOM 结构干净的方案。核心是：不操作原图，用 ::after 伪元素复制一张图，翻转 + 裁剪 + 定位。

关键实操点：

.reflected 容器必须设 position: relative，否则伪元素无法精准贴底
伪元素里的 transform: scaleY(-1) 必须配合 top: 100%，才能让翻转后的图“从原图底部向下长”
clip-path: inset(50% 0 0 0) 是裁出下半段的关键，数值不能改 —— 改成 inset(60% 0 0 0) 就只剩一细条，inset(40% 0 0 0) 会漏出原图下半部分
加 opacity: .25 和 filter: blur(0.5px) 模拟真实倒影的虚化感，Blur 太大会糊，太小没区别

示例结构：

<div class="reflected">
  @@##@@
</div>

CSS：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

.reflected {
  position: relative;
  display: inline-block;
}
.reflected::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 50%;
  background: url("photo.jpg") no-repeat;
  background-size: cover;
  transform: scaleY(-1);
  clip-path: inset(50% 0 0 0);
  opacity: .25;
  filter: blur(0.5px);
}

想加径向渐隐？用 `mask-image` 而不是背景渐变

很多人试过给倒影加 background: linear-gradient(...)，结果整个倒影变灰或消失 —— 因为那是覆盖在图片上的新图层，不是遮罩。真正控制“淡出”的是 mask-image。

注意兼容性现实：

Chromium 系（Chrome/Edge）直接支持 mask-image
Safari 必须写 -webkit-mask-image，且只接受 URL 形式渐变，不能直接写 radial-gradient(...)
Firefox 目前仍需开启实验性标志（about:config 中设 layout.css.masking.enabled 为 true），生产环境别依赖

安全写法（带 Safari 兼容）：

.reflected::after {
  /* ...其他样式同上... */
  mask-image: radial-gradient(circle at top, black, transparent 70%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%' stop-color='black'/%3E%3Cstop offset='70%' stop-color='transparent'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23m)'/%3E%3C/svg%3E");
}