好吧，既然你看了这篇文章，那么我猜你了解CSS并且知道它能为你做什么。但是一些很有用的技术对很多开发人员来说仍然比较隐秘，所以本文中，让我们看看10个肯定能提高你设计的CSS技术吧

1 – 跨浏览器的inline-block

CSS Code复制内容到剪贴板 <style> li{ width:200px; min-height:250px; border:1pxsolid#000; display:-moz-inline-stack; display:inline-block; margin:5px; zoom:1; *display:inline; _height:250px; } </style> <ul> <li> <div> <h4>Thisisawesome</h4> <imgsrc="/wp-content/uploads/2009/06/0933264tq.jpg"alt"></div> </li> <li> <> </li> </ul>

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

CSS Code复制内容到剪贴板 /*支持:car,both,horizontal,none,vertical*/ textarea{ resize:none; }

3 – 跨浏览器圆角

CSS Code复制内容到剪贴板 .rounded{ -moz-border-radius:5px;/*Firefox*/ -webkit-border-radius:5px;/*Safari*/ border-radius:5px; }

4 – 跨浏览器min-height 属性

CSS Code复制内容到剪贴板 selector{ min-height:500px; height:auto!important; height:500px; }

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

CSS Code复制内容到剪贴板 #example-oneaimg,#example-onea{ border:none; overflow:hidden; float:left; } #example-onea:hover{ border:3pxsolidblack; } #example-onea:hoverimg{ margin:-3px; }

6 – 跨浏览器的透明

CSS Code复制内容到剪贴板 .transparent_class{ filter:alpha(opacity=50); -moz-opacity:0.5;/**Firefox3.5即将原生支持opacity属性，所以本条属性只在Firefox3以下版本有效***/ -khtml-opacity:0.5; opacity:0.5; }

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

8 – 跨浏览器的纯CSS提示

CSS Code复制内容到剪贴板 <styletype="text/css"> a:hover{ background:#ffffff; text-decoration:none;}/*****背景色对IE6来说是必须的****/ a.tooltipspan{ display:none; padding:2px3px; margin-left:8px; width:130px; } a.tooltip:hoverspan{ display:inline; position:absolute; background:#ffffff; border:1pxsolid#cccccc; color:#6c6c6c; } </style> Easy<aclass="tooltip"href="#">Tooltip<span>ThisisthecrazylittleEasyTooltipText.</span></a>.

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

CSS Code复制内容到剪贴板 ::selection{ background:#ffb7b7;/*Safari*/ } ::-moz-selection{ background:#ffb7b7;/*Firefox*/ }

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

CSS Code复制内容到剪贴板 a[href^="http://"]{ background:transparenturl(../images/external.png"alt">display:inline-block; padding-right:15px; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。