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

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

2021-09-13 1163人已围观

简介 这篇文章主要为大家详细介绍了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提示

    CSS Code复制内容到剪贴板
    1. "text/css">   
    2. a:hover {   
    3.     background:#ffffff;   
    4.     text-decoration:none;} /***** 背景色对IE6来说是必须的 ****/  
    5.     
    6. a.tooltip span {   
    7.     display:none;   
    8.     padding:2px 3px;   
    9.     margin-left:8px;   
    10.     width:130px;   
    11. }   
    12.     
    13. a.tooltip:hover span{   
    14.     display:inline;   
    15.     position:absolute;   
    16.     background:#ffffff;   
    17.     border:1px solid #cccccc;   
    18.     color:#6c6c6c;   
    19. }   
    20.     
    21. Easy "tooltip" href="#">TooltipThis is the crazy little Easy Tooltip Text..   
    22.   

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

    CSS Code复制内容到剪贴板
    1. ::selection {   
    2.     background: #ffb7b7; /* Safari */  
    3. }   
    4.     
    5. ::-moz-selection {   
    6.     background: #ffb7b7; /* Firefox */  
    7. }   
    8.   

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

    CSS Code复制内容到剪贴板
    1.     a[href^="http://"] {   
    2.     background:transparent url(../images/external.png) center rightright no-repeat;   
    3.     display:inline-block;   
    4.     padding-right:15px;   
    5. }   
    6.   

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

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

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

    下一篇：必须掌握10个非常不错的CSS技巧_CSS教程_CSS_网页制作_

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网