下面整理了3个CSS常用效果，其中就有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;      //溢出隐藏
 }
 需要注意的是，这三句代码缺一不可，不然达不到想要的效果。注意：使用这个属性的元素要给固定宽度，不然怎么会溢出呢。