30+有用的CSS代码片段

  • A+
所属分类:web前端

在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档。除了那些解决常见的恼人的问题外,也包含了一些解决新问题的新技术。

1. 垂直对齐

如果你之前遇到过这个问题,你就应该知道它是多么的烦人,幸运的是,现在你可以使用CSS3变换来解决这个问题:

2. 只在一侧或者两侧具有投影

3. 渐变背景动画效果

从CSS3开始,动画变得非常的酷了,但是切不可过分的使用它们。下面这一技巧巧妙地的移动背景位置,使其看起来像动画一样:

4. 将文本分成多列

5. 表格自动宽度

6. 像出版物一样,第一个字变得大些

7. 特定浏览器的CSS Hacks的完整列表

有时候解决跨浏览器兼容性可能会非常的棘手,但这些特定浏览器的技巧可能会帮你解决问题。

8. 创建模糊文本

9. 不使用表格实现跨浏览器垂直水平居中图片

这段代码可以在一个已知宽高的容器内垂直水平居中一个未知大小的图片,这是 IE 的一个hack:

11. 跨浏览器透明度

12. CSS投影

13. 跨浏览器最小高度

14. 固定 Footer

15. 清除浮动 Clearfix

16. 给可点击元素添加手型光标

17. iPad 定向CSS

18. Pre 标签内文本换行

19. CSS3媒体查询

20. 重置加载

21. 多边框

元素必须是相对定位,且具有足够的padding来显示多余的边框:

22. 移除IE中textarea的滚动条

23. 简单但好看的引用样式

30+有用的CSS代码片段

24. :-moz-placeholder

25. 另一种固定footer的方式

26. 背景透明

27. 居中未知宽度的DIV元素

28. 根据文件类型设置样式

29. 解决IE6/7双倍margin/padding问题

30. 更改选中文本的样式

31. 首字下沉

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: