HTML/CSS代码片段

内容简介：本文收集了我常用的CSS代码片段！

*reset

/** reset **/body, p, ul, ol, dl, dd, th, td, h1, h2, h3, h4, h5, h6, form, input, button, select, textarea { margin: 0; padding: 0; }body { font: 12px/1.5 /5b8b/4f53, arial; }h1, h2, h3, h4, h5, h6 { font-size: 100%; }table{ border-collapse:collapse; border-spacing:0; }textarea { resize: none; overflow: auto; }img { border: 0 none; vertical-align:top; }li { list-style-type: none; }em {font-style:normal; }a { text-decoration:none; }/*clearfix*/.clearfix:before, .clearfix:after { content:""; display:table; }.clearfix:after{ clear:both; }.clearfix{ *zoom:1;}

*select兼容

select { height:22px; line-height:18px; padding:2px 0; }

*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;}

*锚点

<a name="link">不能为空</a><a href="#link">锚点链接</a>

*纯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: #e2ea