css有不少常用的效果，你在平時瀏覽網站的時候可能會看到，但是真的要自己寫的時候，有時候會突然忘記，今天稍微對那些常見的效果做一下小結。

1、每逢大的災難的時候，很多網站變成了灰色，如何讓網站快速變灰？css代碼是很簡單的，用的是css的filter功能。

代碼如下：

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

有一些網站FLASH動畫的顏色不能被CSS濾鏡控制，可以在FLASH代碼的之間插入：

<param value="false" name="menu"/><param value="opaque" name="wmode"/>

2、DIV可編輯，就是讓一個div變成一個類似input輸入框的效果。

在div中添加contentEditable="true" 屬性就可以了，如下：

<div id="div1" contentEditable="true"  ></div>  <div id="div2" contentEditable="true" ></div>  
 <div contentEditable="true"  id="div3"></div>

其中，我后面有篇編輯器的文章 http://www.haorooms.com/post/js_guangbiao 就用到了這個功能！這個是獲得iframe光標所在位置的父節點名稱，iframe中就用到了contentEditable="true" 屬性。

3、有些網站為了不讓用戶復制，設置了div禁止選擇的功能，設置如下屬性：

unselectable="on" onselectstart="return false;"

具體代碼：

<div unselectable="on" onselectstart="return false;">sdfsdfswerwer324234234234</div>

這樣，DIV里面的東西就不能選擇復制了！

4、CSS 中form表單兩端對齊

做form表單的時候，前面經常有姓名，年齡，公司名稱等等，有的是2個字，有的是4個字，如何讓字對齊呢？有的人的做法是打幾個空格，但是這樣不是很準確，最好的辦法是如下：

css代碼:

 .test1 {
            text-align:justify;
            text-justify:distribute-all-lines;/*ie6-8*/
            text-align-last:justify;/* ie9*/
            -moz-text-align-last:justify;/*ff*/
            -webkit-text-align-last:justify;/*chrome 20+*/
        }
        @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
            .test1:after{
                content:".";
                display: inline-block;
                width:100%;
                overflow:hidden;
                height:0;
            }
        }

html代碼：

<div class="box1">
    <div class="test1">姓 名</div>
    <div class="test1">姓 名 姓 名</div>
    <div class="test1">姓 名 名</div>
    <div class="test1">所 在 地</div>
    <div class="test1">工 作 單 位</div></div>

5、input聲音錄入按鈕，（緊支持谷歌）

如下圖紅色框框中的按鈕

代碼如下：

<input type="text" class="box" name="s" id="s" class="inputText" placeholder="輸入關鍵詞"  x-webkit-speech>

添加 x-webkit-speech 屬性就可以了。

6、給input的placeholder設置顏色

設置方法如下：

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;}::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;}:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;}

7、css3實現一個div設置多張背景圖片及background-image屬性

8、CSS選中狀態修改，谷歌滾動軸修改

9、css input[type=file] 樣式美化，input上傳按鈕美化

10、CSS :after 和：before選擇器

after選擇器通常在clear中使用，用法如下：

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

寫了這個clearfix，可以讓外層div包裹整個內層，符合谷歌閉合機制。

也可以在某個元素前面或者后面追加，例如：

p:after{ content:"haorooms：-";background-color:yellow;color:red;font-weight:bold;}

每個p標簽后面都加了一個 -haorooms

11、透明度

opacity: .9; filter:alpha(opacity=90)

IE7和IE6中opacity是沒有用的，在IE6中DIV透明的方法一般用filter；

.haorooms{opacity: 0; cursor:pointer;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}

12、超出長度顯示省略號

單行文本顯示...

一般要指定寬度，然后給如下四個屬性。

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

案例代碼：

.haorooms{width:200px;display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

多行文本顯示....

主要屬性-webkit-line-clamp

p {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;}

這個屬性比較合適WebKit瀏覽器或移動端（絕大部分是WebKit內核的）瀏覽器。

跨瀏覽器兼容的方案

比較靠譜簡單的做法就是設置相對定位的容器高度，用包含省略號(…)的元素模擬實現；

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;}p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
   // background:url(和網頁背景顏色一樣的一張背景圖) repeat-y;
  background-color:#fff;}

注意：

height高度正好是line-height的3倍；

結束的省略好用了半透明的png做了減淡的效果，或者設置背景顏色；

IE6-7不顯示content內容，所以要兼容IE6-7可以是在內容中加入一個標簽，比如用...去模擬；

要支持IE8，需要將::after替換成:after；

13、陰影效果

-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);box-shadow: 0 1px 1px rgba(0,0,0,.2);

14、CSS強制換行和不換行

自動換行

div{ word-wrap: break-word; word-break: normal; }

強制英文單詞斷行

div{word-break:break-all;}

強制不換行

div{white-space:nowrap;}

15、CSS 圓角

IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4，都支持上述的border-radius屬性。早期版本的Safari和Chrome，支持-webkit-border-radius屬性，早期版本的Firefox支持-moz-border-radius屬性。 目前來看，為了保證兼容性，只需同時設置-moz-border-radius和border-radius即可。

-moz-border-radius: 15px;border-radius: 15px;

（注意：border-radius必須放在最后聲明，否則可能會失效。）

另外，早期版本Firefox的單個圓角的語句，與標準語法略有不同。

-moz-border-radius-topleft（標準語法：border-top-left-radius）-moz-border-radius-topright（標準語法：border-top-right-radius）-moz-border-radius-bottomleft（標準語法：border-bottom-left-radius）-moz-border-radius-bottomright（標準語法：border-bottom-right-radius）

16、css瀏覽器兼容問題的一些總結（IE6等）

17、IE6 中png背景透明的最好方法及談談IE6和我的博客

18、css3彈性盒子

#haorooms ul { //父親
            display: -moz-box;
            display: -webkit-box;
            display: box;
            -moz-box-orient: horizontal;
            -webkit-box-orient: horizontal;
            box-orient: horizontal;
        }
        #haorooms  ul li{ //兒子設置
            -moz-box-flex: 1;
            -webkit-box-flex: 1;
            box-flex: 1;
            float:none;}

關于css3彈性盒子模型之box-flex，我在博客中暫時沒有寫相關文章，因為這個屬性不支持IE，且是老版本的用法。

新版本用法：

html如下：

<div class="m_topnav">
    <a class="m_navli m_current" href="#">員工管理</a>
    <a class="m_navli" href="#">員工動態</a></div>

css如下：

.m_topnav{ display: -webkit-flex;display: -moz-flex;display:flex;width:100%;height:1rem;background-color:#fff;border-bottom:1px solid #ddd;}.m_navli{-webkit-flex:1;-moz-flex:1;flex:1;position: relative;font-size:.24rem;text-align: center;line-height: 1rem;}

直接用display:flex方法，支持IE11+ 及所有主流瀏覽器。

另外，jquery mobile 有一套網格布局法，很不錯，支持IE的，有時間可以參考一下，或者研究一下他們是怎么寫的，參照他們的方法可以自己改寫一下！

關于彈性盒子式的布局，大家也可以看下bootstrap,bootstrap提出柵格類的一個說法，你引進他的css之后，可以用col-mid-*來進行布局。例如：

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div></div>

各站一半！

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div></div>

前面的是整個寬度的三分之二，后面是整個寬度的三分之一！

具體可以看看bootstrap的樣式解釋：http://v3.bootcss.com/css/

19、textarea禁止拖動

resize: none; //禁止拖動

以下是resize屬性的的各個取值:

none：用戶不能操縱機制調節元素的尺寸；both：用戶可以調節元素的寬度和高度；horizontal：用戶可以調節元素的寬度；vertical：讓用戶可以調節元素的高度；inherit：默認繼承。

20、div垂直居中的方法總結

div垂直居中的方法，看我寫的一篇文章吧！http://www.haorooms.com/post/css_div_juzhong

21、css固定寬高DIV內部元素垂直居中的方法

和上面的20不同，這里說的是一個div內部元素如何垂直居中，具體請看：http://www.haorooms.com/post/div_guding_inner_center

22、純css制作鼠標移上去顯示圖片效果

具體請看我的一篇文章：http://www.haorooms.com/post/css_hover_jqs

23、CSS3的一些前綴總結

css3為了更好的兼容多個瀏覽器，通常前面加一大堆前綴，有時候感覺很煩，前綴也容易忘記或者漏掉。下面總結一下！

-webkit  /*為Chrome/Safari*/-moz  /*為Firefox*/-ms   /*為IE*/-o  /*為Opera*/

以旋轉為例

-webkit-transform:rotate(-3deg); /*為Chrome/Safari*/-moz-transform:rotate(-3deg); /*為Firefox*/-ms-transform:rotate(-3deg); /*為IE*/-o-transform:rotate(-3deg); /*為Opera*/transform:rotate(-3deg); /*為nothing*/

以border-radius為例(本文上面案例15，CSS 圓角已經提過圓角的問題，下面我們再來重提一下)：

-moz-border-radius: 12px; /* FF1-3.6 */-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

FF4、Saf5以及Chrome都支持border-radius屬性了，我們就沒有必要寫以上兩條了，代碼變成：

border-radius: 12px;

所以有些常用的CSS3效果，由于瀏覽器都支持了，就不需要前綴，但是為了保險起見，你也可以加上前綴！

24、css3的box-sizing

給了兩個并排帶邊框的div百分比寬度，假如不用box-sizing，邊框的寬度會在行內顯示。用box-sizing：border-box,可以去除邊框的占位。

瀏覽器支持IE9以上及火狐、谷歌、Opera等等。

案例如下：

<style> div.container{width:30em;border:1em solid;}div.box{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width:50%;border:1em solid red;float:left;}</style></head><body><div class="container"><div class="box">這個 div 占據左半部分。</div><div class="box">這個 div 占據右半部分。</div></div>

語法：

box-sizing: content-box|border-box|inherit;

25、模糊遮罩效率，模糊濾鏡效果

-webkit-filter: blur(3px);-moz-filter: blur(3px);-o-filter: blur(3px);-ms-filter: blur(3px);filter: blur(3px);

Blur：模糊效果。使選擇區內的影像產生虛化的效果，可以平滑的轉換影像中的生硬部分。

26、漸變效果

默認漸變是從上往下代碼如下：

background:#ed4a60; background: -webkit-linear-gradient(#ed5a5e, #ed3a61);background: -o-linear-gradient(#ed5a5e, #ed3a61); 
 background: -moz-linear-gradient(#ed5a5e, #ed3a61); background: linear-gradient(#ed5a5e, #ed3a61);

前面加一個參數，right,left,bottom,top等，就可以指定漸變方向：

background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/

還可以從左上角開始漸變left top，right top(右上角)以此類推，代碼如下：

background: -moz-linear-gradient(left top, #ace, #f96);background: -webkit-linear-gradient(left top, #ace, #f96);background: -o-linear-gradient(left top, #ace, #f96);

另外還可以指定漸變角度，這個角度是一個由水平線與漸變線產生的的角度，逆時針方向。因此，使用0deg將產生一個左到右橫向梯度，而90度將創建一個從底部到頂部的垂直漸變。

代碼如下：

background: -moz-linear-gradient(<angle>, #ace, #f96);background: -webkit-gradient(<type>,<angle>, from(#ace), to(#f96));//老的寫法background: -webkit-linear-gradient(<angle>, #ace, #f96);background: -o-linear-gradient(<angle>, #ace, #f96);.deg45 {
  background: -moz-linear-gradient(45deg, #ace, #f96);
  background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(45deg, #ace, #f96);
  background: -o-linear-gradient(45deg, #ace, #f96);}

關于漸變就寫到這里！