内容简介:本文收集了我常用的CSS代码片段!
*reset
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
@charset "utf-8"; /* reset */ body, dl, dd, h1, h2, h3, h4, h5, h6, p, form, ol, ul, textarea, button, input, select { margin: 0; } ol, ul, dd, td, th, textarea, button, input, select { padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400; } body { font: 12px/1.5 "Microsoft Yahei", SimSun, arial, sans-serif; } ol, ul { list-style: none; } a, button, input, textarea, select { outline: 0; color: inherit; font: inherit; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } button { overflow: visible; } button, input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } input::-moz-placeholder, textarea::-moz-placeholder { color: #ccc; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #ccc; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #ccc; } input::-ms-clear { display: none; } a { text-decoration: none; } img { vertical-align: top; border: 0 none; } textarea { resize: none; overflow: auto; } table { border-collapse: collapse; border-spacing: 0; } th { text-align: center; } /* clearfix */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }
*select兼容
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
select { height:22px; line-height:18px; padding:2px 0; }
*input兼容
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.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圆角
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.radius { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; }
*水平翻转
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); filter:FlipH(); }
*垂直翻转
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.flipy { -moz-transform:scaleY(-1); -webkit-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); filter:FlipV(); }
*css旋转
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.rotate90 { filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
*css盒阴影
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.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清浮动
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after{ clear:both; } .clearfix{ *zoom:1;}
*锚点
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<a name="link">不能为空</a> <a href="#link">锚点链接</a>
*纯CSS三角形
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.triangle { 0; height: 0; font-size: 0; line-height: 0; border- 50px; border-style: solid; border-top-color: #fff; border-right-color: #fff; border-bottom-color: red; border-left-color: #fff; }
*opacity透明
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*opacity*/ .opacity { filter: alpha(opacity=50); -khtml-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5; }
*选择文本颜色
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 自定义文本选择颜色 */ ::selection { background: #e2eae2; } ::-moz-selection { background: #e2eae2; } ::-webkit-selection { background: #e2eae2; }
*全屏背景
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 全屏背景 */ .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; }
*强制滚动条
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
html { height: 101% }
*渐变gradient
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 渐变 */ .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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*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透明
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 最小高度 */ .minheight { min-height: 550px; height: auto !important; height: 550px; }
*移动端reset
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
body,nav,dl,dt,dd,p,h1,h2,h3,h4,ul,ol,li,input,button,textarea,footer{margin:0;padding:0} header,nav,section,article,footer,figure,figcaption { display: block; } html,body{width:100%;height:100%;} li{list-style:none;} h1,h2,h3,h4,h5{font-size:100%} img,object,video,embed { max-width: 100%;} img {border:none; vertical-align: middle; } button,input,select,textarea{font-size:100%; vertical-align:middle; outline:none;} a { text-decoration: none; } body{min-width:320px;font:normal 62.5%/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;color:#000;background:#f1f1f1;overflow-x:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-moz-user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);} /* common */ .g-tensile { width: 100%; height: 100%; } .g-auto { margin-left: auto; margin-right: auto; }