1. ·您当前的位置:主页 > 技术教程 > Html5技术 >

      [CSS3]border-radius圆角用法

      时间:2019-01-25 16:08w3school
      必须出现一个值,可长度可百分比,比如:border-top-left-radius:5px,border-top-left-radius:5px 50%都是可行

      w3c属性值详解:
      [ <length> | <percentage> ]:必须出现一个值,可长度可百分比,比如:border-top-left-radius:5px,border-top-left-radius:5px 50%都是可行
      {1,2}: 表示他们的值最小可以重复一次,最大可重复两次。假如只有一个值,表示圆角,那么它的水平距离和垂直距离相等,即第二个值复?#39057;?#19968;个值;假如是两个值,那么确定一个椭圆角,第一个值椭圆的水平半径,第二值为椭圆的垂直半径,说起来有点拗口,直接上图:

      只有1个值,如:border-top-left-radius:50px,表?#26223;?#24452;为50px圆,如图:
      左上角
      标注错误了,盒子尺寸为:300*100

      假如有两个值,如:border-top-left-radius:50px 100px,表示水平半径为50px,垂直半径为100px的椭圆,如图:
      左上角

      同理 border-top-right-radius(右上圆角半径), border-bottom-right-radius (右下圆角半径),border-bottom-left-radius(左下圆角半径),也是如此。你只要记住当某个角为一个值?#20445;?#30830;定是一个圆,当使用两个值确定一个椭圆。

      热门文章推荐

      请稍候...
      彩票软件开发公司