font-weight:normal//normal是普通粗细字体
其他的font-weight属性IE不支持
我使用SVG、Canvas、CSS3或者背景图片实现五角星图案及其悬停效CSS3引入伪元素变换特性使实现五角星图形非简单并且结合渐变实现更漂亮效
使用图片实现五角星已经毫必要(图片占用额外请求且数据量除非要支持低版本桌面IE浏览器)
首先我创建三角形通使用带尺寸边线零内容尺寸元素实现代码示范:
.tri { width: 0height: 0border-left: 15px solid transparentborder-right: 15px solid transparentborder-bottom: 30px solid red}
第二步我使用伪元素:after:before克隆2同三角形
.tri:after,.tri:before { width: 0height: 0border-left: 15px solid transparentborder-right: 15px solid transparentborder-bottom: 30px solid red}
我述2伪元素别应用同旋转变换:
.tri:before { transform: rotate(70deg)}.tri:after { transform: rotate(-70deg)}
我实现五角星图形(图标)我用类似实现更几何形状