三个CSS简单效果


后端

零度逍遥

2014-12-10 20:31:14

最近翻阅网上资料,查到了一些自己从未用过的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效果。