• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • border-radius

    版本:CSS3

    CSS属性border-radius允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。该属性是一个简写属性,是为了将这四个属性border-top-left-radiusborder-top-right-radiusborder-bottom-right-radius,和border-bottom-left-radius简写为一个属性。

    • 即使元素没有边框,圆角也可以用到background上面,具体效果受background-clip影响。
    • border-collapse的值为collapse时,border-radius属性不会被应用到表格元素上。

    例如:

    border-radius: 1em/5em;
    
    /* 等价于: */
    
    border-top-left-radius:     1em 5em;
    border-top-right-radius:    1em 5em;
    border-bottom-right-radius: 1em 5em;
    border-bottom-left-radius:  1em 5em;
    
    border-radius: 4px 3px 6px / 2px 4px;
    
    /* 等价于: */
    
    border-top-left-radius:     4px 2px;
    border-top-right-radius:    3px 4px;
    border-bottom-right-radius: 6px 2px;
    border-bottom-left-radius:  3px 4px;
    

    浏览器支持

    IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
    IE9以上版本的浏览器都支持border-radius

    语法

    font-size:<length-percentage>{1,4}[ / <length-percentage>{1,4}?
    • 设置或检索对象使用圆角边框。提供2个参数,以“/”分隔。
    • 第1个参数表示圆角的水平半径,第2个参数表示圆角的垂直半径。若第2个参数省略,则默认其值等于第1个参数的值。
    • 水平半径(或垂直半径)允许设置1~4个参数值。
    • 水平半径(或垂直半径)参数值

      • 如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
      • 如果提供三个参数值,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。
      • 如果提供两个参数值,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。
      • 如果只提供一个参数值,将用于全部的于四个角。

      取值:

      <length-percentage>:取值<length> | <percentage>

      • <length>:定义圆形半径或椭圆的半长轴,半短轴。负值无效。
      • <percentage>:使用百分数定义圆形半径或椭圆的半长轴,半短轴。水平半径值是相对于盒模型的宽度值的百分比;垂直半径值是相对于盒模型的高度值的百分比。负值无效。
      • inherit:表示四个值都从父元素计算值继承。

      例子

      border: solid 10px;
      /* the border will curve into a 'd' */  
      border-radius: 10px 40px 40px 10px;
      
      border: groove 1em red;  
      border-radius: 2em;
      
      background: gold;
      border: ridge gold;
      border-radius: 13em/3em; 
      
      border: none;
      border-radius: 40px 10px;  
      
      border: none;
      border-radius: 50%; 
      
      p{
       width:100px;
       height:100px;
       line-height:100px;
       text-align:center;
       border:1px solid #ed28bb;
       border-radius:10px 54px 20px;
      }
      

      效果图:

      border-radius圆角css属性