css常用效果總結

jopen 9年前發布 | 35K 次閱讀 CSS 前端技術

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

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，所以我很少用到。

我一般用別的方法來代替這個屬性。想達到彈性盒子的要求，jquery mobile 有一套網格布局法，很不錯，支持IE的，有時間可以參考一下，或者研究一下他們是怎么寫的，參照他們的方法可以自己改寫一下！

19、textarea禁止拖動

resize: none; //禁止拖動

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

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

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

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

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

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

22、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效果，由于瀏覽器都支持了，就不需要前綴，但是為了保險起見，你也可以加上前綴！

來自：http://www.haorooms.com/post/css_common

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1419237211000.html

CSS 前端技術