纯CSS代码创建日历图标

采用纯CSS的方式来创建一个日历图标，可以将其用在博客日志或其它地方，有需要的朋友参考下。 

例子，纯CSS代码创建日历图标，如下图：

先看DEMO：
这个日历图标中使用的HTML代码异常简单，如下：
7 February

需要用一个外围元素，在这里用的是p元素(或者使用HTML5中的新元素——TIME)。在这个外围元素中我们还需要一个包含着月份的元素。

实现原理：
现在，有两个可以操作的元素，另外，还要为每个真元素创建两个伪元素，这样总共有6个可以操作的元素，借助这些元素即可对日历进行修饰。

如下图：

　　实现过程：
首先，对外围元素进行定义。你可能已经注意到我使用了 box-shadow、border-radius 以及 CSS渐变。并不是所有的浏览器都支持这些属性，但至少它们越来越普及。
注意，没有定义固定的高度，所有的高度都是通过外围元素以及其中的 em 元素的 line-height 属性来控制的。
 

复制代码代码示例:

本文链接：https://www.dnwfb.com/1003.html，转载请注明出处。