CSS常用的幾個簡單效果

最近翻閱網上資料，查到了一些自己從未用過的CSS，於是記錄下來，在有些時候興許能用得上。

1、CSS中簡單的運算

我們通常用css指定的是靜態結果，而動態結果，如高度，位置等等則需要js來動態進行計算賦值，而其實css自己也能夠進行簡單的運算，主要是用到了calc這個函數。

.div{ width: calc(100% - 50px); }

2、使用CSS實現文字模糊效果

在PS中我們可以使用濾鏡讓面前的文字看起來很模糊，這和透明度還不一樣，在css中我們也可以實現。

p{ color: transparent; text-shadow: #111 0 0 5px; }

3、使用CSS建立高寬比固定的元素

在前端開發中，尤其是在寫響應式布局網頁的時候，我們總想要裡面的元素保持同樣的高寬比，這樣可以避免元素變形，而要達到這種目的，我們可以通過給父級元素底部的內邊距和子項目絕對位置來實現。

<div style="width: 100%; position: relative; padding-bottom: 20%;">
    <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:#ccc;">
        這裡面的文字會隨著這個div的變化而折行
    </div>
</div>

大家可以去試試，找出更多的CSS效果。

CSS3濾鏡讓表徵圖變灰

首先上html代碼：

<a href='' class='icon'><img src='01.jpg' /></a>
css代碼：

.icon{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);   
filter: grayscale(100%);
filter: gray;
}
.icon:hover{
filter: none;
-webkit-filter: grayscale(0%);
}

這樣我們就只需要上傳一張彩色的圖片就能實現滑鼠移入變彩色，移出變灰的效果。

text-overflow:ellipsis實現省略符號效果

使用這個css樣式很簡單，只需要三句代碼，舉例，我們給我們的h3標籤添加這個屬性：

h3{text-overflow:ellipsis; //省略符號形式
    white-space:nowrap;   //所有字元一行顯示
    overflow:hidden;      //溢出隱藏
}
需要注意的是，這三句代碼缺一不可，不然達不到想要的效果。注意：使用這個屬性的元素要給固定寬度，不然怎麼會溢出呢。