(原)前端知識雜燴（css系列）

更新於 20170316

 

1. css hack

1 .pad{
2     padding:17px 0 0 17px;  /* 普通寫法 */ 
3     *padding:17px 0 0 17px; /* *爲IE7   *+html css()爲IE7 */
4     _padding:17px 0 0 17px;  /*  _爲IE6  *html css()爲IE6 */
5 }

 

2. css 設置圓角

1 .radius{
2     -moz-border-radius: 100px;
3     -webkit-border-radius: 100px;
4     border-radius:100px;
5 }

 

3. css  盒子陰影   (x,y,陰影模糊度,陰影顏色)

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

 

4. css 透明度

1 .lucency{
2     filter:alpha(opacity=80);
3     opacity:0.8;    
4 }

 

5. css 文本超出範圍省略號代替 ( 塊級元素，強制單行，強制指定行數)

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

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

 

6. css 設置背景透明

1 .lucencyBg{
2     background-color:transparent;
3 }

 

7. css 文字中間劃橫線效果

1 .txtDec{
2     text-decoration:line-through;
3 }

 

8. css 背景圖片定位  (一般爲負數)

1 .posBg{
2     background-position:x y;
3 }

 

9.  css 下拉框去掉三角形

1 .selectStyle{
2     appearance:none;
3     -moz-appearance:none;
4     -webkit-appearance:none;
5 }

 

10. css 輸入框沒有選中效果

1 .inp{
2     outline:none;
3 }

 

11. css 禁止頁面圖片拖曳 ( body )

1 body{
2     oncontextmenu="return false" ondragstart="return false"  tstart="return false"
3 }

 

12. css 防止點擊出現透明背景問題

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

 

13. css 未知寬度水平居中 相對浮動

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

 

14. css 容器內徹底居中（垂直 & 水平）

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

 

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

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

1 /*下面的CSS是針對IE7，IE6*/
2 <!--[if lte IE 7]>
3 <style>
4 .outer{position:relative;}
5 .middle{position: absolute; top: 50%;}
6 .inner{position: relative; top:-50%}
7 </style> 
8 <![endif]-->

 

16. css  textarea 輸入框/輸入區域不可隨意拖動大小

1 .textarea{ resize:none; }

 

17. css radio / checkbox 選中樣式設置（推薦用在移動端，pc端未經測試）

 1 input[type=radio]{
 2     -webkit-appearance: none;
 3     appearance: none;
 4     width:15px;
 5     height:15px;
 6     margin-top:-2px;
 7     margin-left:3px;
 8     cursor: pointer;
 9     vertical-align:middle;
10     -webkit-border-radius:15px;
11     -moz-border-radius:15px;
12     border-radius:15px;
13     border:1px solid #e29452;
14     background-color:#fff;
15 }

16 input[type=radio]:checked::after {
17     content: url(../images/check.png);
18     margin-left:1px;
19 }

如圖：

 

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