起因是 Cry 姐在群里提到了 box-shaodow 的 Spread Distanc 属性,于是在测试时钉子就想到做了这样一个模拟了一张 CD 的页面。整个页面只用了一个 div 元素,全部效果完全通过 CSS 实现。查看效果→
DOM 如下:
<body><div></div></body>
光盘整体通过多 box-shadow 和控制阴影距离以及模糊实现,为了保证透明后配色能看调了半天。上下的文字都通过伪元素添加,其中上方的标题用到了 text-shadow 模拟立体效果。四个小点是利用了 border-image 在 Webkit 下诡异的默认渲染和 linear-gradient 的错误打开方式模拟,在别的内核下貌似没有效果。