用css3和ico图片实现火狐社区的分享图标
今天看火狐社区的页面，看到关于分享功能的几个图标实现的css3样式，模仿着做一个，可以支持chrome,firefox,ie9,opera等浏览器，不过不支持ie9以下的浏览器；
源码下载地址：
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin:0;
padding:0
}
fieldset, img {
border:0
}
input, textarea, select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
border-radius:5px
}
input, textarea, select {
font-size:100%
}
body {
background:0;
color:#333;
font:13px/1.5 "微软雅黑", 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif;
margin:0 auto;
min-height:400px
}
.side-section h3{ margin-bottom:5px; font-size:14px;}
.side-section{ width:600px; margin:30px auto;}
.share-tools:after {clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden}
.share-tools a{ border-radius:3px; height:16px; width:16px; margin:5px 9px 0 0; float:left; padding:8px;}
.share-tools a.share-sina{background-image:-moz-radial-gradient(left top, farthest-corner, rgba(216,32,48,0), rgba(216,32,48,.3))
background-image:-webkit-radial-gradient(left top, farthest-corner, rgba(216,32,48,0), rgba(216,32,48,.3));
box-shadow:0 0 20px rgba(216,32,48,.7) inset}
.share-tools a.share-qq {background-image:-moz-radial-gradient(left top, farthest-corner, rgba(0,128,176,0), rgba(0,128,176,.3));
background-image:-webkit-radial-gradient(left top, farthest-corner, rgba(0,128,176,0), rgba(0,128,176,.3));
box-shadow:0 0 20px rgba(0,128,176,.7) inset
}
.share-tools a.share-sohu {
background-image:-moz-radial-gradient(left top, farthest-corner, rgba(208,8,0,0), rgba(208,8,0,.3));
background-image:-webkit-radial-gradient(left top, farthest-corner, rgba(208,8,0,0), rgba(208,8,0,.3));
box-shadow:0 0 20px rgba(208,8,0,.7) inset
}
.share-tools a.share-douban {background-image:-moz-radial-gradient(left top, farthest-corner, rgba(0,104,0,0), rgba(0,104,0,.3));
background-image:-webkit-radial-gradient(left top, farthest-corner, rgba(0,104,0,0), rgba(0,104,0,.3));
box-shadow:0 0 20px rgba(0,104,0,.7) inset
}
</style>
</head>
<body>
<div class="side-section">
<h3>分享给好友</h3>
<div class="share-tools">
<a title="分享到新浪微博" href="javascript:void(0);" class="share-sina"><img src="images/weibo.ico"></a>
<a title="分享到腾讯微博" href="javascript:void(0);" class="share-qq"><img src="images/qq.ico"></a>
<a title="分享到搜狐微博" href="javascript:void(0);" class="share-sohu"><img src="images/sohu.ico"></a>
<a title="分享到豆瓣" href="javascript:void(0);" class="share-douban"><img src="images/douban.ico"></a>
</div>
</div>
</body>
</html>
预览效果如下图：
ie9中预览效果：
firefox 15.0.1中预览效果：
