内容简介：本文收集了我常用的CSS代码片段！
*reset
/** reset **/body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, form, textarea { margin: 0; }body { font-family: arial, \5b8b\4f53; font-size: 12px; line-height: 1.5; }h1, h2, h3, h4, h5, h6, input, textarea, section { font-size: 100%; }input, textarea, section { font-family: inherit; }ul, ol { padding-left: 0; list-style-type: none; }table{ border-collapse:collapse; border-spacing:0; }th, td { padding: 0; }em,th,var{font-style:normal;}img { border: 0 none; vertical-align:top; }a { text-decoration:none; }a:hover{text-decoration:underline; } *input兼容
.ipt { border: 1px solid #469021; background: #64A246; color: #fff; font:bold 11px arial,sans-serif; padding: 0.25em 0.5em; text-transform: uppercase; margin: 0; overflow: visible; height: 27px; line-height: 19px; _line-height: 16px; width: 80px;} *css圆角
.radius { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px;} *水平翻转
.flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); filter:FlipH();} *垂直翻转
.flipy { -moz-transform:scaleY(-1); -webkit-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); filter:FlipV();} *css旋转
.rotate90 { filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);} *css盒阴影
.box_shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#000'); -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#000')";} *clearfix清浮动
.clearfix:before, .clearfix:after { content:""; display:table; }.clearfix:after{ clear:both; }.clearfix{ *zoom:1;} *锚点
不能为空锚点链接
*纯CSS三角形
.triangle { width: 0; height: 0; font-size: 0; line-height: 0; border-width: 50px; border-style: solid; border-top-color: #fff; border-right-color: #fff; border-bottom-color: red; border-left-color: #fff;} *opacity透明
/*opacity*/.opacity { filter: alpha(opacity=50); -khtml-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5;} *选择文本颜色
/* 自定义文本选择颜色 */::selection { background: #e2eae2; }::-moz-selection { background: #e2eae2; }::-webkit-selection { background: #e2eae2; } *全屏背景
/* 全屏背景 */.cover { background: url('bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} *强制滚动条
html { height: 101% } *渐变gradient
/* 渐变 */.gradient { background: #629721; background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721)); background-image: -webkit-linear-gradient(top, #83b842, #629721); background-image: -moz-linear-gradient(top, #83b842, #629721); background-image: -ms-linear-gradient(top, #83b842, #629721); background-image: -o-linear-gradient(top, #83b842, #629721); background-image: linear-gradient(top, #83b842, #629721);} *font-face
/*font-face*/@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */}body { font-family: 'MyWebFont', Arial, sans-serif;} *png透明
/* png透明 */.png { width:200px; height:100px; background: url(this.png) no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='this.png',sizingMethod='crop');/* 路径相对于html */} *min-height
/* 最小高度 */.minheight { min-height: 550px; height: auto !important; height: 550px;}
