好吧，既然你看了这篇文章，那么我猜你了解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="lobster"width="75"height="75"/>

</div>

</li>

<li>

<!--etc...-->

</li>

</ul>

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

CSS Code复制内容到剪贴板

textarea{

resize:none;

}

3 – 跨浏览器圆角

CSS Code复制内容到剪贴板

.rounded{

-moz-border-radius:5px;

-webkit-border-radius:5px;

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;

}

::-moz-selection{

background:#ffb7b7;

}

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

CSS Code复制内容到剪贴板

a[href^="http://"]{

background:transparenturl(../images/external.png)centerrightrightno-repeat;

display:inline-block;

padding-right:15px;

}

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