起因是 Cry 姐在群里提到了 box-shaodow 的 Spread Distanc 属性，于是在测试时钉子就想到做了这样一个模拟了一张 CD 的页面。整个页面只用了一个 div 元素，全部效果完全通过 CSS 实现。查看效果→

One-Div-CSS3-CD

DOM 如下：

光盘整体通过多 box-shadow 和控制阴影距离以及模糊实现，为了保证透明后配色能看调了半天。上下的文字都通过伪元素添加，其中上方的标题用到了 text-shadow 模拟立体效果。四个小点是利用了 border-image 在 Webkit 下诡异的默认渲染和 linear-gradient 的错误打开方式模拟，在别的内核下貌似没有效果。

下方的换行尝试用 Unicode 换行符失败，最后在 Cry 姐建议下用 white-space: pre; 加空格模拟成功，最后在 +Kerwin Che 的 建议下 发现只要在 pre 模式下就可以使用 /A 换行了 …… 尝试把 div 元素本身的内容利用起来，但是发现无法完成文字弯曲围绕在光盘内盘的效果只好作罢。暂时就想到了这些玩法，如果还有不破坏美观继续给页面添加元素的纯 CSS 方法敬请告知~

本文来自 钉子の次元 - Dimpurr - 千里之行，始於足下。 ,原文地址 一个 Div 可以做到的 ……