好吧，既然你看了这篇文章，那么我猜你了解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;}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
最新文章
热门文章
猜你喜欢
