zoukankan      html  css  js  c++  java
  • 用CSS3写圆角(超简单)

    前缀

    -moz(例如 -moz-border-radius)用于Firefox
    -webkit(例如:-webkit-border-radius)用于Safari和Chrome。

    CSS3圆角(所有的)

    使用CSS3,我们可以用几行代码来创建圆角。

    这是一个5px普通边框和15px边框半径的设置:

    #roundCorderC{
     font-family: Arial;
     border: 5px solid #dedede;
     -moz-border-radius: 15px;
     -webkit-border-radius: 15px;
     padding: 15px 25px;
     height: inherit;
      590px;
     }

    浏览器支持:

    • √ Firefox(3.05+…)
    • √ Google Chrome(1.0.154+…)
    • √ Google Chrome(2.0.156+…)
    • × Internet Explorer(IE7, IE8)
    • × Opera 9.6
    • √ Safari(3.2.1+ windows)

    CSS3圆角(个别的)

    当然,一个DIV的四个角不需要全部都是圆角,你可以个别的实现圆角。

    #roundCornerI{
      font-family: Arial;
      border: 5px solid #dedede;
      -moz-border-radius-topleft: 15px;
      -moz-border-radius-topright: 0px;
      -moz-border-radius-bottomright: 15px;
      -moz-border-radius-bottomleft: 0px;
      -webkit-border-top-left-radius: 15px;
      -webkit-border-top-right-radius: 0px;
      -webkit-border-bottom-left-radius: 0px;
      -webkit-border-bottom-right-radius: 15px;
      padding: 15x 25px;
      height: inherit;
      590px;
    }

    浏览器支持:

      • √ Firefox(3.05+…)
      • √ Google Chrome(1.0.154+…)
      • √ Google Chrome(2.0.156+…)
      • × Internet Explorer(IE7, IE8)
      • × Opera 9.6
      • √ Safari(3.2.1+ windows)
  • 相关阅读:
    Cookie
    webSocket+HeadBeat
    Javascript-多个数组是否有一样值
    后缀补全用得好,提前下班没烦恼
    Nginx 究竟如何处理事件?
    9 个习惯助你在新的一年更有精力
    一篇文章带你了解 ZooKeeper 架构
    浅析 Nginx 网络事件
    ZooKeeper 入门看这篇就够了
    如何优雅地关闭worker进程?
  • 原文地址:https://www.cnblogs.com/ranran/p/3979430.html
Copyright © 2011-2022 走看看