css經常使用效果總結

css有很多經常使用的效果，你在平時瀏覽網站的時候可能會看到，可是真的要本身寫的時候，有時候會忽然忘記，今天稍微對那些常見的效果作一下小結。

一、每逢大的災難的時候，不少網站變成了灰色，如何讓網站快速變灰？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"/>

二、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" 屬性。

三、有些網站爲了避免讓用戶複製，設置了div禁止選擇的功能，設置以下屬性：

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

具體代碼：

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

這樣，DIV裏面的東西就不能選擇複製了！

四、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>

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

以下圖紅色框框中的按鈕

代碼以下：

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

添加 x-webkit-speech 屬性就能夠了。

六、給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; }

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

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

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

十、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

十一、透明度

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

十二、超出長度顯示省略號

單行文本顯示...

通常要指定寬度，而後給以下四個屬性。

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；

1三、陰影效果

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

1四、CSS強制換行和不換行

自動換行

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

強制英文單詞斷行

div{ word-break:break-all; }

強制不換行

div{ white-space:nowrap; }

1五、CSS 圓角

IE 九、Opera 10.五、Safari 五、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）

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

1七、IE6 中png背景透明的最好方法及談談IE6和個人博客

1八、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/

1九、textarea禁止拖動

resize: none; //禁止拖動

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

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

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

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

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

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

2二、純css製做鼠標移上去顯示圖片效果

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

2三、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+ */

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

border-radius: 12px;

因此有些經常使用的CSS3效果，因爲瀏覽器都支持了，就不須要前綴，可是爲了保險起見，你也能夠加上前綴！

2四、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;

2五、模糊遮罩效率，模糊濾鏡效果

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

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

2六、漸變效果

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

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

關於漸變就寫到這裏！