10个非常有用的CSS hack和技术

原文:[10个非常有用的CSS hack和技术](http://www.qianduan.net/10-useful-css-hacks-and-technique.html) 译自:[10 astonishing css hacks and technique](http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-technique) 版权所有,转载请注明出处,多谢!!! - - - - - -
好吧,既然你看了这篇文章,那么我猜你了解CSS并且知道它能为你做什么。但是一些很有用的技术对很多开发人员来说仍然比较隐秘,所以本文中,让我们看看10个肯定能提高你的设计的CSS技术吧 ## 1 – 跨浏览器的inline-block -
#### This is awesome ![lobster](//www.qianduan.net/img/2009/06/0933264tq.jpg)

2 – 禁用Safari调整文本框大小

/ * 支持: car, both, horizontal, none, vertical * / textarea { resize: none; }

3 – 跨浏览器圆角

.rounded{ -moz-border-radius: 5px; /* Firefox / -webkit-border-radius: 5px; / Safari */ border-radius:5px; }

资源:
CSS3系列教程:边框半径和圆角
CSS3之旅: border-radius(圆角)
Border-radius:使用CSS制作圆角!

4 – 跨浏览器min-height 属性

selector { min-height:500px; height:auto !important; height:500px; }

资源: Min-height fast hack

5 – 不会改变布局的图片滚动边框

#example-one a img, #example-one a { border: none; overflow: hidden; float: left; } #example-one a:hover { border: 3px solid black; } #example-one a:hover img { margin: -3px; }

资源: 不会改变布局的图片滚动边框

6 – 跨浏览器的透明

.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5;/* Firefox 3.5即将原生支持opacity属性,所以本条属性只在Firefox3以下版本有效 **/ -khtml-opacity: 0.5; opacity: 0.5; }

资源: 为所有浏览器设置CSS透明
CSS3系列教程:透明度
CSS3之旅:RGBa颜色

7 – 纯CSS的Lighbox效果:无需Javascript !

资源:纯CSS的Lighbox效果:无需Javascript !

8 – 跨浏览器的纯CSS提示

Easy TooltipThis is the crazy little Easy Tooltip Text..

资源: Easy CSS Tooltip

9 – 为选中的文本设置颜色(尽支持Firefox/Safari)

::selection { background: #ffb7b7; /* Safari / } ::-moz-selection { background: #ffb7b7; / Firefox */ }

资源: 使用CSS覆盖默认的文字选择颜色

10 – 在链接后面添加一个文件类型图标

a[href^="http://"] { background:transparent url(../images/external.png) center right no-repeat; display:inline-block; padding-right:15px; }

资源: 使用CSS选择器创建个性化链接样式
使用CSS为链接添加文档类型图标