CSS填坑代碼大全

1. 文字溢出省略號顯示

white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

2. 文字換行

/*強制不換行*/
white-space:nowrap;
/*自動換行*/
word-wrap: break-word;
word-break: normal;
/*強制英文單詞斷行*/
word-break:break-all;

3. 畫三角形

width: 0; 
height: 0; 
border-style: solid; 
border-width: 0 100px 100px 100px; 
border-color: transparent transparent #f00 transparent;

4. 強制出現滾動條

html{  height: 101%;}

5. 清除浮動

.clearfix{*zoom: 1;}
.clearfix{overflow:hidden;_zoom:1;}
.clearfix:after{clear:both;display:table;content:"」;}

6. 給div實現透明效果，支持ie7+

opacity: 0.5; 
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

7.去掉Webkit(chrome)瀏覽器中input(文本框)或textarea的黃色焦點框

input,button,select,textarea{ outline:none;}
textarea{ resize:none;}

8.去掉chrome記住密碼後自動填充表單的黃色背景

input : -webkit-autofill {
    background-color : #FAFFBD ;
    background-image : none ;
    color : #000 ;
}

9.min-height: 最小高度兼容代碼

min-height:500px;height:auto !important;height:500px;overflow:visible;

10.placeholder佔位符顏色自定義

input:-moz-placeholder { color: #369; }

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

11.焦點去除背景

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

-webkit-tap-highlight-color: transparent;  
// i.e. Nexus5/Chrome and Kindle Fire HD 7

12.手機版本網頁a標記虛線框問題

a:focus { outline:none; -moz-outline:none; }

13.輸入框聚焦發光效果

input[type=text],
textarea{
     -webkit-transition: all 0.30s ease-in-out;
     -moz-transition: all 0.30s ease-in-out;
     -ms-transition: all 0.30s ease-in-out;
     -o-transition: all 0.30s ease-in-out;
     outline: none;
     border: 1px solid #ddd;
}

input[type=text]:focus, 
textarea:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border: 1px solid rgba(81, 203, 238, 1);
}