如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑:
2、伸展一个元素到窗口高度
在具体场景中,你可能想要将一个元素伸展到窗口高度,基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度,我们需要伸展顶层元素:html
和body
:
然后将100%应用到任何元素的高:
3、基于文件格式使用不同的样式
为了更容易知道链接的目标,有时你想让一些链接看起来和其它的不同。下面的片段在文本链接前添加一个图标,对不同的资源使用不同的图标或图片:
4、创建跨浏览器的图像灰度
灰度有时看起来简约和优雅,能为网站呈现更深层次的色调。在示例中,我们将对一个SVG图像添加灰度过滤:
为了跨浏览器,会用到filter
属性:
CSS中最具诱惑的一个功能是能添加动画效果,除了渐变,你可以给背景色、透明度、元素大小添加动画。目前,你不能为渐变添加动画,但下面的代码可能有帮助。它通过改变背景位置,让它看起来有动画效果。
6、CSS:表格列宽自适用
对于表格,当谈到调整列宽时,是比较痛苦的。然后,这里有一个可以使用的技巧:给td
元素添加 white-space: nowrap;
能让文本正确的换行
7、只在一边或两边显示盒子阴影
如果你要一个盒阴影,试试这个技巧,能为任一边添加阴影。为了实现这个,首先定义一个有具体宽高的盒子,然后正确定位:after
伪类。实现底边阴影的代码如下:
如果你碰到一个比自身容器长的文本,这个技巧对你很有用。在这个示例中,默认时,不管容器的宽度,文本都将水平填充。
简单的CSS代码就能在容器中调整文本:
想要让文本模糊?可以使用color
透明和text-shadow
实现。
10、用CSS动画实现省略号动画
这个片段将帮助你制造一个ellipsis的动画,对于简单的加载状态是很有用的,而不用去使用gif图像。