今天介绍一种纯CSS的方式来制作日历图标，你可以在博文或其他地方使用。我也是自己学的，不过效果是图片级的。正如标题所说，不是炫技，而是引玉。最终效果如下：和之前一样，先看DEMO：http://www.paper-rater.com/jian-ce/css-calendar-icon.html这个日历图标使用的HTML代码很简单，如下：7February
我们需要使用一个外围元素，这里我们使用p元素（或者使用HTML5中的新元素——TIME）。在这个外部元素中，我们还需要一个包含月份的元素。实现原理：现在，我们有两个可以操作的元素。另外，我们需要为每一个真实元素创建两个伪元素，这样我们一共有6个可以操作的元素。有了这些元素，我们就可以控制日历的整理。看看下图你就明白了。实现过程：首先，我们定义外围元素。你可能已经注意到我使用了box-shadow、border-radius和CSS渐变。并非所有浏览器都支持这些属性，但至少它们正变得越来越普遍。请注意，我们没有定义固定的高度，所有高度都由周围元素的line-height属性和其中的em元素控制。.calendar{边距：.25em10px10px0;填充顶部：5px；向左飘浮;宽度：80px；背景：#ededef;背景：-webkit-gradient（线性，左上角，左下角，从（#ededef），到（#ccc））；背景：-moz-线性渐变（顶部，#ededef，#ccc）；字体：bold30px/60pxArialBlack,Arial,Helvetica,sans-serif;文本对齐：居中；颜色：#000；文字阴影：#fff01px0；-moz-边框半径：3px；-webkit-边框半径：3px；边界半径：3px；职位：相对；-moz-box-shadow:02px2px#888;-webkit-box-shadow:02px2px#888;框阴影：02px2px#888；}em元素包包含月份的名称，它的CSS定义如下：.calendarem{display:block;字体：normalbold11px/30pxArial,Helvetica,sans-serif;颜色：#fff；文字阴影：#00365a0-1px0；背景：#04599a；背景：-webkit渐变（线性、左上角、左下角、从（#04599a）到（#00365a））；背景：-moz-线性渐变（顶部，#04599a，#00365a）；-moz-border-radius-bottomright:3px;-webkit-border-bottom-right-radius:3px;边框右下角半径：3px；-moz-border-radius-bottomleft:3px;-webkit-边框左下角半径：3px；边框左下角半径：3px；顶部边框：1pxsolid#00365a；现在，让我们定义伪元素外部元素的伪元素（:before和:after）以创建两个圆孔。.calendar:before,.calendar:after{内容：'';向左飘浮;位置：绝对；顶部：5px；宽度：8px；高度：8px；背景：#111；z-索引：1；-半径：10px；-webkit-边框半径：10px；边框半径：10px；-moz-box-shadow:01px1px#fff;}.calendar:before{left:11px;}.calendar:after{right:11px;}和em伪元素用于创建两个环。.calendarem:before,.calendarem:after{内容:'';向左飘浮;位置：绝对；顶部：-5px；宽度：4px；高度：14px；背景：#dadada;背景：-webkit-gradient（线性，左上角，左下角，从（#f1f1f1），到（#aaa））；背景：-moz-线性渐变（顶部，#f1f1f1，#aaa）；z-索引：2；-moz-边框半径：2px；-webkit-边框半径：2px；边界半径：2px；}.calendarem:before{left:13px;}.calendarem:after{right:13px;}大功告成。...原文链接：http://www.cnblogs.com/ilian/archive/2013/04/07/css-icon.html
