10个非常实用的CSS hack技术

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

1 – 跨浏览器的inline-block

CSS Code复制内容到剪贴板

<style>   

    li {   

        width: 200px;   

        min-height: 250px;   

        border: 1px solid #000;   

        display: -moz-inline-stack;   

        display: inline-block;   

        margin: 5px;   

        zoom: 1;   

        *display: inline;   

        _height: 250px;   

    }   

</style>    

<ul>   

 <li>   

  <div>   

   <h4>This is awesome</h4>   

   <img src="/wp-content/uploads/2009/06/0933264tq.jpg" alt="lobster" width="75" height="75"/>   

  </div>   

 </li>   

 <li>   

  <!-- etc ... -->   

 </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-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 – 跨浏览器的透明

CSS Code复制内容到剪贴板

.transparent_class {   

 filter:alpha(opacity=50);   

 -moz-opacity:0.5;/** Firefox 3.5即将原生支持opacity属性，所以本条属性只在Firefox3以下版本有效 ***/  

 -khtml-opacity: 0.5;   

 opacity: 0.5;   

}   

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

8 – 跨浏览器的纯CSS提示

CSS Code复制内容到剪贴板

<style type="text/css">   

a:hover {   

    background:#ffffff;   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!