效果图
HTML 结构
-
页面基本结构符合 HTML5 规范，根元素为<html>，设置了语言为英文（lang="en"）。
-
<head>部分定义了页面的字符编码、标题以及内联的 CSS 样式，还包含一段检测 CSS 特性支持情况的 JavaScript 代码。
-
<body>中包含一个带有role="button"的<div>元素，其内部有用于实现光影特效的子元素，如<span>和内层的<div>。
JavaScript 代码
-
主要检测浏览器是否支持CSS.registerProperty函数。如果支持，在控制台输出相应提示，设置--supported变量为 1，并添加类名；若不支持，同样输出提示，设置--not-supported变量为 1 并添加对应的类名，以此来适配不同浏览器对相关 CSS 特性的支持情况。
-
总体而言，这段代码利用 HTML、CSS 和 JavaScript 配合，实现了一个带有酷炫光影特效的卡片展示效果，并且考虑了对特定 CSS 特性的兼容性处理。
后台回复（有点小酷的光影卡片特效）获取完整代码
点个赞吧！