原文：CSS3 Starbursts
http://matthewjamestaylor.com/blog/css3-starbursts最近我体验了下css3的rotation（旋转）属性，发现可以用来制作多角星而且不用使用图片。我们所需要的只是一些嵌套的块级元素，通过为它们设置不同的旋转角度来实现。通过设置rotation可以将盒子的角（corner）沿着星星的圆周分布。
首先，我创建了一个16角星，通过使用三个包含在a标签内的嵌套的span元素实现，效果如下图所示：
上面的星星效果只能在支持CSS3 rotation属性的浏览器下看到，目前有safari，Firefox和Google chrome。其他浏览器下就被优雅降级为一个普通的黄色方块。我把在safari下的效果截图贴上，以便于你可以看到在现代浏览器下的效果。下面是HTML代码，只用了一个链接和3个span标签：
<div>
<a href="#" class="starburst">
<span>
<span>
<span>NEW CSS3Starbursts!</span>
</span>
</span>
</a>
</div>
css代码稍微有点长，我高亮了rotation属性部分的代码，一个是为Firefox设置（前缀为-moz-），一个为webkit（前缀为-webkit-），另一个是标准的rotation规则。
.starburst {
display:block;
width:6em;
height:6em;
background:#fe0;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
rotation:-45deg;
position:relative;
top:2em;
left:2em;
text-align:center;
text-decoration:none;
color:#000;
font-weight:bold;
font-family:Arial, sans-serif;
}
.starburst span {
display:block;
width:6em;
height:6em;
background:#fe0;
-webkit-transform:rotate(22.5deg);
-moz-transform:rotate(22.5deg);
rotation:22.5deg;
}
让星星动起来
如果你使用css3创作星暴的话，可以比使用图片制作实现更多的效果。 使用了圆角（rounded border）, 文本阴影（text-shadow）, 过渡和变形的动画效果（animations with transitions and transforms, and also translations）。动画效果只有在Safari 或Google Chrome下才能看到。下面是一些demo截图：
本例的特点
1.无css hack
2.兼容iPhone，iPod Touch，&iPod
3.SEO友好
4.不需要图片
5.不需要Javascript
6.兼容缩放文本（使用em单位）
查看DEMO