1.清除浮動：

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1;}

2.設置背景透明，字體不透明：

background:rgba(221,172,106,0.6) none repeat scroll !important; filter:Alpha(opacity=60)

3.三角形箭頭

/*向上箭頭，類似A，只有三個邊，不能指定上邊框*/
.arrow-up {width: 0px; height: 0px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid yellow; /*
 
以下屬性可以是IE5兼容*/ font-size: 0px; line-height: 0px; } 
/*向下箭頭 ，類似 V*/
.arrow-down {width: 0px; height: 0px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid blue; font-size: 0px; line-height: 0px; } /*向左的箭頭：只有三個邊：上，下，右。而<|總體來看，向左三角形的高=上+下邊框的長度。寬=右邊框的長度*/
div.arrow
 
-left {width: 0px; height: 0px; border-bottom: 30px solid transparent; border-top: 30px solid transparent; border-right: 40px solid green; font-size: 0px; line-height: 0px; } /*向右的箭頭：只有三個邊：上，下，左。而|>總體來看，向右三角形的高=上+下邊框的長度。寬=左邊框的長度*/
div.arrow-right {width: 0px; height: 0px; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 60px solid black; font-size: 0px; line-height: 0px; }

4.圖片垂直居中

4.1外部div的css：
dvi{ width:100%; height:100%; line-height:100%; text-align:center; }
div img{ vertical-align: middle; }
4.2
div{border:1px #ddd solid;width:208px;height:148px;overflow:hidden;text-align:center;display:table;float:left;margin:50px;position:relative;}
div span{display:table-cell;vertical-align:middle;}
div span img{border:1px #ddd solid;margin:0 auto;max-width:200px;max-height:140px;}

5.字與字之間的間隔

.div{ letter-spacing:2px; }

6.textarea禁止拉伸

textarea{ resize:none;}

7.首行縮進

p{ text-indent:0; }

8.
超過一行用省略號

p{ width:1000px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

超過兩行用省略號

p{ 
    width:100%;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; /** 對象作為伸縮盒子模型顯示 **/
    -webkit-box-orient: vertical; /** 設置或檢索伸縮盒對象的子元素的排列方式 **/
    -webkit-line-clamp: 2; /** 顯示的行數 **/
    overflow: hidden; 
}

9.ios系統中按鈕樣式清除：

.btn{ -webkit-appearance : none ; }

11.英文字母大小寫

text-transform：capitalize; //首字母大寫
uppercase; //全大寫
lowercase; //全小寫

12.table外邊框顏色

table{
　　width: 100%;
　　margin-top: 40px;
　　border-color:#eeeeee;
　　border: solid thin #eeeeee;
}

13.圖片變灰

.gray { 
　　-webkit-filter: grayscale(100%);
　　-moz-filter: grayscale(100%);
　　-ms-filter: grayscale(100%);
　　-o-filter: grayscale(100%);
　　filter: grayscale(100%);
　　filter: gray;
}

14.數字太長 不會自動換行怎麽辦

p{
    word-break:break-all;
}

15.placeholder字體顏色

input::-webkit-input-placeholder {
　　color: #333;
}

16.css3漸變

transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-property: opacity;
-webkit-transition-property: opacity;
-ms-transition-property: opacity;
-o-transition-property: opacity;

記錄不常用的css效果