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

      

     

  • 相关阅读:
    问题2 机器学习篇 正则化L1和L2有什么区别?
    numpy 数组拼接方法
    问题1 机器学习篇 如何解决过拟合(overfiting)?
    低阶 TensorFlow 基础知识
    k-Nearest Neighbors 实战2 使用kNN算法改进约会网站的配对结果
    k-Nearest Neighbors 实战1 简单的电影分类实例
    VirtualBox使用
    知乎登录设计思考
    微信返回上一页停留在上次点击的位置
    好的网站-一直在收集
  • 原文地址:https://www.cnblogs.com/xuange306/p/4624042.html
Copyright © 2011-2022 走看看