CSS3制作Freebie标签 <br />body{<br />background-color: #f2f2f2;<br />background-size:20px 20px,20px 20px,6px 6px,6px 6px;<br />background-position:-2px -2px, -2px -2px,0 0, 3px 3px;<br />background-image: -webkit-linear-gradient(white 2px, transparent 2px),<br />-webkit-linear-gradient(0, white 2px, transparent 2px),<br />-webkit-linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6),<br />-webkit-linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6);<br />background-image: -moz-linear-gradient(white 2px, transparent 2px), <br /> -moz-linear-gradient(0deg, white 2px, transparent 2px),<br /> -moz-linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6),<br /> -moz-linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6);<br />background-image: -ms-linear-gradient(white 2px, transparent 2px),<br /> -ms-linear-gradient(0, white 2px, transparent 2px),<br /> -ms-linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6),<br /> -ms-linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6);<br />background-image: -o-linear-gradient(white 2px, transparent 2px),<br /> -o-linear-gradient(0, white 2px, transparent 2px),<br /> -o-linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6),<br /> -o-linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6); <br />background-image: linear-gradient(white 2px, transparent 2px),<br /> linear-gradient(0, white 2px, transparent 2px),<br /> linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6),<br /> linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6);<br />}<br />.box ul{<br />margin-top: 100px;<br />letter-spacing: -4px;<br />word-spacing: -4px;<br />font-size: 0;<br />height:75px;<br />text-align: center;<br />box-shadow:0 -2px 3px rgba(0,0,0,.05),0 2px 3px rgba(0,0,0,.05);<br />background:#fff; <br />}<br />.box li{<br />letter-spacing: normal;<br />word-spacing: normal;<br />display:inline-block;<br />*display: inline;<br />zoom:1;<br />position:relative;<br />top:-5px;<br />width:39px;<br />height:48px;<br />margin-right:40px;<br />border-top:1px solid #66991f;<br />border-left:1px solid #66991f;<br />border-right:1px solid #66991f;<br />overflow: hidden;<br />background-color: #79b023;<br />background-size:3px 3px;<br />background-position: 0 0, 1px 1px;<br />background-image: -webkit-linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e), <br /> -webkit-linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e);<br />background-image: -moz-linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e),<br /> -moz-linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e);<br />background-image: -ms-linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e),<br /> -ms-linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e);<br />background-image: -o-linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e),<br /> -o-linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e); <br />background-image: linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e),<br /> linear-gradient(45deg, #91c32e 25%, transparent 25%, transparent 75%, #91c32e 75%, #91c32e);<br />}<br />.box li:last-child{ margin-right: 0;}<br />.box li:after,.box li:before{<br />position:absolute;<br />display:block; <br />}<br />.box li:before{<br />top:5px;<br />left: 5px;<br />content: "";<br />width: 28px;<br />height: 0;<br />line-height: 30px;<br />color:rgba(69,124,12,.5);<br />border-top: 1px dashed #5d8c1c;<br />border-bottom: 1px dashed #b4d969;<br />font-size: 18px;<br />font-family: 'icomoon';<br />font-style: normal;<br />speak: none;<br />font-weight: normal;<br />-webkit-font-smoothing: antialiased;<br />}<br />.box li:after{ <br />content:"";<br />left:-1px;<br />top:38px;<br />width:38px;<br />height:35px;<br />box-shadow:1px 0 3px rgba(0,0,0,.3),0 -1px 3px rgba(0,0,0,.3);<br />background:#fff;<br />-webkit-transform:rotate(-45deg) skew(18deg,20deg);<br />-moz-transform:rotate(-45deg) skew(18deg,20deg);<br />-o-transform:rotate(-45deg) skew(18deg,20deg);<br />-ms-transform:rotate(-45deg) skew(18deg,20deg);<br />transform:rotate(-45deg) skew(18deg,20deg);<br />}<br />.box li:nth-child(1):before{<br />content: "\21";<br />}<br />.box li:nth-child(2):before{<br />content: "\25";<br />}<br />.box li:nth-child(3):before{<br />content: "\24";<br />}<br />.box li:nth-child(4):before{<br />content: "\22";<br />}<br />.box li:nth-child(5):before{<br />content: "\26";<br />}<br />@font-face {<br />font-family: 'icomoon';<br />src:url('fonts/icomoon.eot');<br />src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),<br /> url('fonts/icomoon.svg#icomoon') format('svg'),<br /> url('fonts/icomoon.woff') format('woff'),<br /> url('fonts/icomoon.ttf') format('truetype');<br />font-weight: normal;<br />font-style: normal;<br />}<br /> http://www.999jiujiu.com/ CSS3制作Freebie标签
