钉子の次元

Dimpurr – 千里之行,始於足下。

一个 Div 可以做到的 ……

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

One-Div-CSS3-CD

One-Div-CSS3-CD

DOM 如下:

<body><div></div></body>

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

READ MORE →