zoukankan      html  css  js  c++  java
  • 好用的一些CSS样式

    1.垂直对齐

    .vc{
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    2. 渐变背景动画效果

    button {
        padding: 15px;
        background-image: linear-gradient(#FC6E51, #FFF);
        background-size: auto 200%;
        background-position: 0 100%;
        transition: background-position 0.5s;
    }    
    button:hover {
        background-position: 0 0;
    }

    3. CSS投影

    // 外投影
    .shadow {
      -moz-box-shadow: 5px 5px 5px #ccc;
      -webkit-box-shadow: 5px 5px 5px #ccc;
      box-shadow: 5px 5px 5px #ccc;
    }
    
    // 内投影
    .shadow {
       -moz-box-shadow:inset 0 0 10px #000000;
       -webkit-box-shadow:inset 0 0 10px #000000;
       box-shadow:inset 0 0 10px #000000;
    }

    4. 固定 Footer

    #footer {
       position:fixed;
       left:0px;
       bottom:0px;
       height:30px;
       100%;
       background:#999;
    }
     
    /* IE 6 */
    * html #footer {
       position:absolute;
       top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
    }

    5. 移除IE中textarea的滚动条

    textarea { overflow: auto; }

    6. 居中未知宽度的DIV元素

    .content {
        margin: 0 auto 8px;
        display: table;
        }
     
    .content div {
        display: table-cell;
        }
     
    <!--[if IE]>
    .content {
        display: block;
        text-align: center;
        }
    .content div {
        display: inline;
        zoom: 1;
    }
    <![endif]-->
  • 相关阅读:
    DBCC CHECKDB 数据库或表修复
    数据一致性错误
    SQL Server如何用最小的磁盘来时时访问Oracle
    What 's the meaning of "WindowsonWindows" layer?
    linux解压 tar命令
    ZendStudio中设置SVN:ignore
    微盾PHP脚本加密专家解密算法
    修改linux服务器的时间
    phpmyadmin是空白或很慢的解决办法
    linux 下安装json
  • 原文地址:https://www.cnblogs.com/HuberyHu/p/5318592.html
Copyright © 2011-2022 走看看