2015-10-15 |

前端冷知识集锦(CSS篇)

前端冷知识集锦(CSS篇)-前端新奇

本文章为连载文章,上一篇:

前端新奇 - 前端冷知识集锦(HTML篇)

CSS篇

  • 关于CSS的恶作剧

相信你看完以下代码后能够预料到会出现什么效果。

前端新奇 - 前端冷知识集锦(CSS篇)

前端新奇 - 前端冷知识集锦(CSS篇)

  • 简单的文字模糊效果

以下两行简单的CSS3代码可达到将文字模糊化处理的目的,出来的效果有点像使用PS的滤镜,so cool!

前端新奇 - 前端冷知识集锦(CSS篇)

  • 垂直居中

有好多次博主都有这样的需求,垂直居中显示某个DIV,我们知道CSS中天然有水平居中的样式text-align:center。唯独这个垂直居中无解。

当然你可以将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现,但此种实现往往会因为display:table而破坏整体布局,那还不如直接用table标签了呢。

下面这个样式利用了translate来巧妙实现了垂直居中样式,需IE9+。

前端新奇 - 前端冷知识集锦(CSS篇)

相比而言,水平居中要简单得多,像上面提到的text-align:center,经常用到的技巧还有margin:0 auto。但对于margin大法也只在子元素宽度小于容器宽度时管用,当子元素宽度大于容器宽度时此法失效。

如法炮制,利用left和transform同样可实现水平居中,不过意义不大,毕竟text-align和margin差不多满足需求了。

前端新奇 - 前端冷知识集锦(CSS篇)

  • 多重边框

利用重复指定box-shadow来达到多个边框的效果

DEMO:http://dabblet.com/gist/4034534

前端新奇 - 前端冷知识集锦(CSS篇)

前端新奇 - 前端冷知识集锦(CSS篇)

  • 实时编辑CSS

通过设置style标签的display:block样式可以让页面的style标签显示出来,并且加上contentEditable属性后可以让样式成为可编辑状态,更改后的样式效果也是实时更新呈现的。此技巧在IE下无效。拥有此技能者,逆天也!

前端新奇 - 前端冷知识集锦(CSS篇)

前端新奇 - 前端冷知识集锦(CSS篇)

  • 创建长宽比固定的元素

通过设置父级窗口的padding-bottom可以达到让容器保持一定的长度比的目的,这在响应式页面设计中比较有用,能够保持元素不变形。

前端新奇 - 前端冷知识集锦(CSS篇)

前端新奇 - 前端冷知识集锦(CSS篇)

  • CSS中也可以做简单运算

通过CSS中的calc方法可以进行一些简单的运算,从而达到动态指定元素样式的目的。

前端新奇 - 前端冷知识集锦(CSS篇)

本头条号将对以后更新的文章进行归类,以方便大家阅读。比如文章的标题以Bootstrap开头,这篇文章就是关于Bootstrap的。还有一些连载的文章将有单独的标题开头,请各位客官留意。

前端观察

发表评论

    评价:
    验证码: 点击我更换图片