使用css如何制作时间ICON方法实践

.date p span {
background: #d10000;
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
}


红色部分的实现是通过为span的背景设置linear-gradient属性实现的，红色的数值也是来自于photoshop。

复制代码
.date p span {
background: #d10000;
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
display: block;
}

 
修改文字样式，使它和设计匹配，大小设置为45px，设置为粗体字，颜色设置为白色，使用text-transform实现大写转换。将span标签设置为块元素，这样他就会匹配容器的大小了，设置红色背景。

复制代码
.date p span {
background: #d10000;
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
display: block;
border-top: 3px solid #a13838;
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
padding: 6px 0 6px 0;
}

 
剩下的就是添加头部边框，用border-top样式实现，还有就是用border-radius属性实现下部两个圆角。一点点的padding属性可以让月份文字上下和其他元素有些间隔。
浏览器兼容性
 
尽管css改进的属性可以帮助我们实现photoshop中渐变和阴影的效果，但是我们仍然要面对以前web设计师要面对的问题，浏览器兼容性。