zoukankan      html  css  js  c++  java
  • css3学习总结2--CSS3圆角边框

    绘制一个圆角边框的示例

    .div{
      border: solid 5px blue;
      border-radius: 20px;
      -moz-border-radius:20px;
      -o-border-radius: 20px;
      -webkit-border-radius:20px;
      background-color:skyblue;
      padding:20px;
      180px;
    }
    

      在示例中具有一个div元素,使用border-radius属性将其边框绘制为圆角边框,圆角半径为20像素,边框颜色为蓝色,div元素背景色为浅蓝色。

     

    border-radius中指定两个半径

    .wrap {
      border: solid 5px blue;
      border-radius: 40px 20px;
      -moz-border-radius:40px 20px;
      -o-border-radius:40px 20px;
      -webkit-border-radius:40px 20px;
      background-color:skyblue;
      padding:20px;
      180px;
    }
    

     

    不显示边框

    在CSS3中,如果使用了border-radius属性但是把边框设定为不显示的时候,浏览器将把背景的四个角绘制为圆角。

    修改边框种类

    使用了border-radius属性后,不管边框是什么种类,都会将边框沿着圆角曲线进行绘制。

    绘制四个角不同半径的圆角边框

    如果要绘制的圆角边框四个角半径各不相同,可以将border-top-left-radius属性、border-top-right-radius属性、border-bottom-right-radius属性、border-bottom-left-radius属性结合起来使用。

    示例:

    .wrap {
       border: solid 5px blue;
      border-radius-topleft:10px;
      border-radius-topright:20px;
      border-radius-bottomright:30px;
      border-radius-bottomleft:40px;
      -moz-border-radius-topleft:10px;
      -moz-border-radius-topright:20px;
      -moz-border-radius-bottomright:30px;
      -moz-border-radius-bottomleft:40px;
      -o-border-radius-topleft:10px;
      -o-border-radius-topright:20px;
      -o-border-radius-bottomright:30px;
      -o-border-radius-bottomleft:40px;
      -webkit-border-top-left-radius:10px;
      -webkit-border-top-right-radius:20px;
      -webkit-border-bottom-right-radius:30px;
      -webkit-border-bottom-left-radius:40px;
       background-color:skyblue;
       padding:20px;
       180px;
    }
    

      

     

  • 相关阅读:
    HDU 2516 取石子游戏(FIB博弈)
    HDU 2147 kiki's game (简单博弈,找规律)
    HDU 1847 Good Luck in CET-4 Everybody!(找规律,或者简单SG函数)
    ***Linux chmod命令修改文件与文件夹权限命令代码
    CentOS下用yum命令安装jdk
    Nginx 虚拟主机 VirtualHost 配置
    Nginx的nginx.conf配置文件中文注释说明
    快速php日志,写内容到文件,把日志写到log文件
    php-fpm进程管理方式(static和dynamic)
    阿里云宝塔Linux服务器管理面版初始化地址不能登入(原创)
  • 原文地址:https://www.cnblogs.com/xuange306/p/4624042.html
Copyright © 2011-2022 走看看