zoukankan      html  css  js  c++  java
  • CSS3 圆角矩形的使用

    在 CSS3 中,可以用 border-radius 属性实现圆角矩形。最简单的例子如下:

     200px;
    height: 100px;
    border-radius: 20px;
    border: 1px solid;
    
     

    如果将 border-radius 的值设为一个正方形边长的一半,就得到一个圆形:

     160px;
    height: 160px;
    border-radius: 80px;
    border: 1px solid;
    
     

    实际上, 圆角矩形四个角的圆弧半径可以不一样,我们可以用 border-top-left-radius,border-top-right-radius,border-bottom-left-radius 和 border-bottom-right-radius 属性分别设置四个角的值。

    另外,四个角也可以设置为椭圆弧形状,例如:

     200px;
    height: 100px;
    border-radius: 40px / 20px;
    border: 1px solid;
    
     

    这个 border-radius 属性只有 Firefox 4.0,Chrome 4.0,Safari 5.0,Opera 11.50 和 IE 9.0 开始的浏览器才支持。旧的 Firefox 支持 -moz-border-radius 属性,而旧的 Chrome 和 Safari 浏览器支持 -webkit-border-radius 属性。

    参考资料:
    [1] CSS Backgrounds and Borders Module Level 3
    [2] border-radius - MDN
    [3] CSS3 的圆角 Border-radius

  • 相关阅读:
    安全
    请求
    使用 Fetch
    安全
    script
    PWA
    link(外部资源关系)
    base(根URL)
    缓存
    IndexedDB基本概念
  • 原文地址:https://www.cnblogs.com/zoho/p/2450182.html
Copyright © 2011-2022 走看看