CSS中的字重开关的代码

html-css07

CSS中的字重开关的代码,第1张

font-weight:bold//bold是字加粗

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)}

我实现五角星图形(图标)我用类似实现更几何形状