zoukankan      html  css  js  c++  java
  • css3常用代码整理

    1.圆角

    .rd10{-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;-khtml-border-radius: 10px; -ms-border-radius:10px;}
    .rd5{-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; -khtml-border-radius: 5px;-ms-border-radius:5px;}
    .roundtl{-moz-border-top-left-radius:5px;-webkit-border-top-left-radius:5px; -khtml-border-top-left-radius:5px;-ms-border-top-left-radius:5px;}
    .roundtr{-moz-border-top-right-radius:5px;-webkit-border-top-right-radius:5px; -khtml-border-top-right-radius:5px;-ms-border-top-right-radius:5px;}
    .roundbl{-moz-border-bottom-left-radius:5px;-webkit-border-bottom-left-radius:5px; -khtml-border-bottom-left-radius:5px;-ms-border-bottom-left-radius:5px;}
    .roundbr{-moz-border-bottom-right-radius:5px;-webkit-border-bottom-right-radius:5px; -khtml-border-bottom-right-radius:5px;-ms-border-bottom-right-radius:5px;}

     2.阴影

    .shadow{box-shadow: 0px 3px 3px #000;-moz-box-shadow: 0px 3px 3px #000;-webkit-box-shadow: 0px 3px 3px #000;}
    .shadow{box-shadow:0px 0px 18px rgba(0,0,0,.4);-moz-box-shadow: 0px 0px 18px rgba(0,0,0,.4);-webkit-box-shadow: 0px 0px 18px rgba(0,0,0,.4);}

    .shadow{-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.3);-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.3);box-shadow: 0 1px 3px 0 rgba(0,0,0,.3);}

    3.transition

    -webkit-transition: all ease 1s;-moz-transition:all ease 1s;-o-transition:all ease 1s;transition: all ease 1s

    4.transform

    -webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2); -transform:scale(1.2,1.2);
    -webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)

    5.透明度

    .transparent {filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7;opacity: 0.7;}

    6.按钮样式

    .btn {
      background: transparent;
      border: 2px solid #fff;
      border-radius: 0px;
      box-shadow: none;
      color: #fff;
      padding: 12px 18px;
      font-size: 13px;
      font-weight: bold;
      transition: all 0.4s ease-in;
    }
    .btn:hover {
      background: #009988;
      border-color: transparent;
    }
  • 相关阅读:
    Vue 消息无缝滚动
    请求不携带cookie问题
    vue中添加favicon
    自定义表单-校验数据规则
    vue 刷新当前页面的方式
    读阮一峰《ECMAScript 6 入门》小结
    Java进阶知识点3:更优雅地关闭资源
    Java进阶知识点2:看不懂的代码
    用Java实现异构数据库的高效通用分页查询功能
    Java进阶知识点1:白捡的扩展性
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/5408774.html
Copyright © 2011-2022 走看看