您现在的位置是：网站首页> 编程资料编程资料

10个非常实用的CSS hack技术_CSS教程_CSS_网页制作_

2023-11-11 196人已围观

简介 这篇文章主要为大家详细介绍了10个非常实用的CSS hack技术，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

1 – 跨浏览器的inline-block

CSS Code复制内容到剪贴板
  1.     
    2.   
    •  
    •   
    •   
        
    •    

      This is awesome

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

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

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

    3 – 跨浏览器圆角

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

    4 – 跨浏览器min-height 属性

    CSS Code复制内容到剪贴板
    1. selector {   
    2.   min-height:500px;   
    3.   height:auto !important;   
    4.   height:500px;   
    5. }   
    6.   

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

    CSS Code复制内容到剪贴板
    1. #example-one a img, #example-one a {   
    2.     border: none;   
    3.     overflow: hidden;   
    4.     float: left;   
    5. }   
    6. #example-one a:hover {   
    7.     border: 3px solid black;   
    8. }   
    9. #example-one a:hover img {   
    10.     margin: -3px;   
    11. }   
    12.   

    6 – 跨浏览器的透明

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

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

     

    8 – 跨浏览器的纯CSS提示

    提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：CSS兼容问题之HACK技术_CSS教程_CSS_网页制作_

    下一篇：钓鱼发烧友评论任务完成之后没给钱怎么办_手机游戏_游戏攻略_

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网