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)
  • 相关阅读:
    CSS基本相关内容中秋特别奉献
    JavaScript基础
    jQuery(内涵: jquery选择器)
    ADO.NET(内涵效率问题)
    三层实例(内涵Sql CRUD)
    数据库的应用详解二
    三层相关案例(及常见的错误)
    Java中生成唯一ID的方法
    Postgres 的 Array 类型
    java的错误和异常的区别
  • 原文地址:https://www.cnblogs.com/ranran/p/3979430.html
Copyright © 2011-2022 走看看