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;
    }
    

      

     

  • 相关阅读:
    C#使用CurrentUICulture切换语言
    XmlNode与XmlElement的区别总结
    git 怎样删除远程仓库的最近一次错误提交?
    Kermit,Xmodem,1K-Xmodem,Ymodem,Zmodem传输协议小结
    C#串口通信发送数据
    通过 Chrome 调试运行在 IOS-safari 上的页面
    display:flex不兼容Android、Safari低版本的解决方案 【flex布局】
    jquery获取<div></div>之间的内容.text() 和 .html()区别
    vscode格式化代码无效--可能的解决方法
    git pull出现fatal: unable to access 'https://github.com/XXX/YYY.git'
  • 原文地址:https://www.cnblogs.com/xuange306/p/4624042.html
Copyright © 2011-2022 走看看