(原)前端知识杂烩（css系列）

更新于 20170316

1. css hack

 .pad{
     padding:17px 0 0 17px;  /* 普通写法 */
     *padding:17px 0 0 17px; /* *为IE7   *+html css()为IE7 */
     _padding:17px 0 0 17px;  /*  _为IE6  *html css()为IE6 */
 }

2. css 设置圆角

 .radius{
     -moz-border-radius: 100px;
     -webkit-border-radius: 100px;
     border-radius:100px;
 }

3. css  盒子阴影   (x,y,阴影模糊度,阴影颜色)

 .shadow{
     -moz-box-shadow: 3px 3px 4px #fff;
     -webkit-box-shadow: 3px 3px 4px #fff;
     box-shadow: 3px 3px 4px #fff;
     filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff');  /* 盒子阴影 IE6,IE7 */
     -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff')"; /* 盒子阴影 IE8 */
 }

4. css 透明度

 .lucency{
     filter:alpha(opacity=80);
     opacity:0.8;
 }

5. css 文本超出范围省略号代替 ( 块级元素，强制单行，强制指定行数)

/* 超出一行 */
 .over{
     overflow:hidden;
     white-space:nowrap;
     text-overflow:ellipsis;
 }

/* 超出两行，省略号  */
.over2{
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp:;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

6. css 设置背景透明

 .lucencyBg{
     background-color:transparent;
 }

7. css 文字中间划横线效果

 .txtDec{
     text-decoration:line-through;
 }

8. css 背景图片定位  (通常为负数)

 .posBg{
     background-position:x y;
 }

9.  css 下拉框去掉三角形

 .selectStyle{
     appearance:none;
     -moz-appearance:none;
     -webkit-appearance:none;
 }

10. css 输入框没有选中效果

 .inp{
     outline:none;
 }

11. css 禁止页面图片拖曳 ( body )

 body{
     oncontextmenu="return false" ondragstart="return false"  tstart="return false"
 }

12. css 防止点击出现透明背景问题

 .colorBg{
     -webkit-tap-highlight-color:rgba(0,0,0,0);
 }

13. css 未知宽度水平居中 相对浮动

 .unknow_width_center1 {position:relative; left:50%; float:left;}
 .unknow_width_center1 li {position:relative; right:50%; z-index:; float:left;}

14. css 容器内完全居中（垂直 & 水平）

 .parent{ position:relative; width:300px; height:300px; margin:0 auto;}
 .child{ position:absolute; left:; right:; bottom:; top:; width:50px; height:50px; overflow:auto; margin:auto;}

15. css 容器内文字垂直居中

 .outer { display:table; width:578px; overflow:hidden;}
 .middle {display:table-cell; vertical-align:middle;}

 /*下面的CSS是针对IE7，IE6*/
 <!--[if lte IE 7]>
 <style>
 .outer{position:relative;}
 .middle{position: absolute; top: 50%;}
 .inner{position: relative; top:-50%}
 </style>
 <![endif]-->

16. css  textarea 输入框/输入区域不可随意拖动大小

 .textarea{ resize:none; }

17. css radio / checkbox 选中样式设置（推荐用在移动端，pc端未经测试）

 input[type=radio]{
     -webkit-appearance: none;
     appearance: none;
     width:15px;
     height:15px;
     margin-top:-2px;
     margin-left:3px;
     cursor: pointer;
     vertical-align:middle;
     -webkit-border-radius:15px;
     -moz-border-radius:15px;
     border-radius:15px;
     border:1px solid #e29452;
     background-color:#fff;
 }
 input[type=radio]:checked::after {
     content: url(../images/check.png);
     margin-left:1px;
 }

如图：

18. css 鼠标移上图片，图片放大

.fouce{width:300px;height:300px;overflow:hidden;}
.fouce>img{
    width:100%;height:100%;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -o-transition:all 1s;
    }
.fouce:hover img{
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -o-transition:all 1s;
    -moz-transform:scale(1.2,1.2);
    -webkit-transform:scale(1.2,1.2);
    -o-transform:scale(1.2,1.2);
}

然后， 在需要放大的 div 中添加 fouce classname 即可

19. css 三角形（下拉框或者对话框总会用到三角形吧，不用css3就可以搞定小三角形）

.border{
    position: absolute;
    left: 31px;
    top: -8px;
    display: block;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #FFFEC6;
}

20. css 针对不同的移动设备的方案（哪个不同写哪个）

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */

    .prize_round{  width: 70%;top: 8%;margin-left: -33%;}

}

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */

    .prize_round{  width: 78%;top: 9%;margin-left: -39%;}

}

@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */

    .prize_round{  width: 80%;top: 8%;margin-left: -40%;}

}

@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */

   .prize_round{  width: 82%;top: 8%;margin-left: -41%;}

}

21. css  移动端横屏 & 竖屏 样式

//竖屏时使用的样式
@media all and (orientation:portrait) {
.css{}
}

//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
}

22. css  table 边框

.order_table{
    width: 100%;
    border-collapse:collapse;
    border:solid 1px #e6e6e6;
}

.order_table tr td{
    border: solid #e6e6e6;
    border-width:0px 1px 1px 0px;
}

如图

23. 文字第一行缩进两个字符

.txt p{
    text-indent: 2em;
}