使用CSS3实现的player播放按钮完成的效果如下
查看效果并下载
Step 1：先了解border的原理：
Step 2：HTML代码结构
Html代码<sectionclass="playContainer"><liclass="playBtn"><ahref="#"title="start">Start</a></li><liclass="pauseBtn"><ahref="#"title="pause">Pause</a></li><liclass="stopBtn"><ahref="#"title="stop">Stop</a></li><liclass="forwardBtnplayBtn"><ahref="#"title="forward">Forward</a><ahref="#"title="forward">Forward</a></li><liclass="rewindBtn"><ahref="#"title="rewind">Rewind</a><ahref="#"title="rewind">Rewind</a></li><liclass="ejectBtn"><ahref="#"class="arrow">Eject</a><ahref="#"class="dash">Eject</a></li></section>
Step 3：画背景圆，position：relative
Css代码.playContainerli{position:relative;float:left;border:25pxsolid#404040;color:#404040;height:0;width:0;-webkit-border-radius:100%;-moz-border-radius:100%;-o-border-radius:100%;border-radius:100%;margin:020px;}
Step 4：画stop按钮，要让按钮居中。
按钮相对外层圆圈绝对定位，从圆圈的中心开始，所以要调整top和left值
stop按钮边长14px，相对原点需要向上、向左移动7个像素，居中。
全部的CSS如下：
Css代码.playContainer{position:relative;float:left;background:rgba(0,0,0,0.8);padding:20px;}.playContainerli{position:relative;float:left;border:25pxsolid#404040;color:#404040;height:0;width:0;-webkit-border-radius:100%;-moz-border-radius:100%;-o-border-radius:100%;border-radius:100%;margin:020px;}.playContainera{border-style:solid;text-indent:-9999px;position:absolute;top:-8px;left:-3px;}.playBtna{border-color:transparenttransparenttransparent#fff;border-width:8px08px12px;width:0;height:0;}.pauseBtna{border-color:transparentwhite;border-width:06px;height:15px;width:6px;left:-9px;}.stopBtna{border:7pxsolid#fff;height:0;width:0;left:-7px;top:-7px;}.forwardBtna{border-left-width:8px;left:1px;}.forwardBtna:first-child{margin-left:-7px;}.rewindBtna{border-width:8px8px8px0;border-color:transparent#ffftransparenttransparent;width:0;height:0;}.rewindBtna:first-child{margin-left:-7px;}.ejectBtna.arrow{border-width:08px8px8px;border-color:transparenttransparent#ffftransparent;top:-26px;left:-8px;}ectBtna.dash{border-width:004px;border-color:transparenttransparent#fff;height:0;width:16px;left:-8px;top:4px;}