經常使用css總結

我的博客：

https://chenjiahao.xyz

---

 

一、讓網站快速變灰

1 html {
2    filter: grayscale(100%);//IE瀏覽器
3   -webkit-filter: grayscale(100%);//谷歌瀏覽器
4   -moz-filter: grayscale(100%);//火狐
5   -ms-filter: grayscale(100%);
6   -o-filter: grayscale(100%);
7   filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
8   -webkit-filter: grayscale(1);//谷歌瀏覽器
9 }

 

二、讓div如input般可編輯

1 <div id="test" contentEditable="true"  ></div>  
2 
3 <div id="test1" contentEditable="true" ></div>  
4 
5  <div id="test2" contentEditable="true"></div> 

兼容性以下圖：

 

三、讓div禁止選擇

1 <div unselectable="on" onselectstart="return false;">
2 試試看可否選擇
3 </div>

 

四、給placeholder設置屬性

 1 ::-webkit-input-placeholder { /* WebKit browsers */
 2     color:    #999;
 3 }
 4 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 5     color:    #999;
 6 }
 7 ::-moz-placeholder { /* Mozilla Firefox 19+ */
 8     color:    #999;
 9 }
10 :-ms-input-placeholder { /* Internet Explorer 10+ */
11     color:    #999;
12 }

 

五、清除浮動

1 .clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0}

 

六、文字溢出顯示省略號

1 {display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

 

七、強制換行

 1 //自動換行
 2 
 3 div{ 
 4 word-wrap: break-word; 
 5 word-break: normal; 
 6 }
 7 
 8 //強制英文單詞斷行
 9 
10 div{
11 word-break:break-all;
12 }
13 
14 //強制不換行
15 
16 div{
17 white-space:nowrap;
18 }

 

Ps：未完待續~