html5 css3样式图标怎么做

html5 css3样式图标制作方法：

1、html代码：

<div id="boxes">

<div id="boxShortcode">border-radius: 40px (shortcode)</div>

<div id="box1">border-top-right-radius: 40px (same on both axis)</div>

<div id="box2">border-top-right-radius: 20px 40px (x <y) </div>

<div id="box3">border-top-right-radius: 40px 20px (x >y) </div>

</div>

2、css样式代码：

#boxes div { margin-bottom: 20pxheight: 50pxpadding-left: 20px }

#boxShortcode {

background: cyan

border-radius: 40px

}

#box1 {

background: red

border-top-right-radius: 40px

}

#box2  {

background: yellow

border-top-right-radius: 20px 40px

}

#box3 {

background: lime

border-top-right-radius: 40px 20px

}

3、运行结果：

这个不是H5特有的情况，只是设计师习惯性用法，用i表示ico图标，便于他人理解。例子：

<ul><li><i class="ico1"></i>首页</li><li><i class="ico2"></i>关于我们</li></ul>

<style>

    .ico1,.ico2{background:url(test.png) center left no-repeat width:15px height:15px}

</style>

---