border-radius属性

border-radius属性是CSS3中的一个简写属性，用于 设置元素的外边框圆角 。该属性可以接收一个或多个值，用于指定元素的四个角(左上角、右上角、右下角、左下角)的圆角半径。

  1. 单值语法 ：

  • 可以指定一个值，此时该值将应用于所有四个角，创建一个圆形的圆角边框。

  • 例如：border-radius: 50px；

  1. 双值语法 ：

  • 可以指定两个值，此时第一个值表示左上角和右下角的圆角半径，第二个值表示右上角和左下角的圆角半径，从而创建一个椭圆形的圆角边框。

  • 例如：border-radius: 25px 50px；

  1. 三值语法 ：

  • 可以指定三个值，此时第一个值表示左上角的圆角半径，第二个值表示右上角和左下角的圆角半径，第三个值表示右下角的圆角半径，从而创建一个椭圆形的圆角边框。

  • 例如：border-radius: 10px 20px 30px；

  1. 四值语法 ：

  • 可以指定四个值，分别表示左上角、右上角、右下角和左下角的圆角半径，从而创建一个圆形的圆角边框。

  • 例如：border-radius: 10px 20px 30px 40px；

此外，border-radius属性还可以使用百分比值来相对于元素的宽度或高度来指定圆角半径。例如：

  • border-radius: 50%； 将圆角半径设置为元素宽度或高度的50%。

兼容性

border-radius属性兼容IE9+、Firefox 4+、Chrome、Safari 5+以及Opera浏览器。对于较低版本的浏览器，可以添加相应的浏览器前缀来兼容，例如：

  • -webkit-border-radius: 50%；

  • -moz-border-radius: 50%；

  • -o-border-radius: 50%；

  • -ms-border-radius: 50%；

示例

以下是一些使用border-radius属性的示例：

  1. 设置所有角的圆角半径为50px ：
    div {
        border: 1px solid black；
        border-radius: 50px；
    }
    ```

2. **设置左上角和右下角的圆角半径为25px，右上角和左下角的圆角半径为50px** <b class="card40_249__sup_a7f6" data-sup="sup">2</b>：

```css
    div {
        border: 1px solid black；
        border-radius: 25px 50px；
    }
    ```

3. **设置左上角的圆角半径为10px，右上角的圆角半径为20px，右下角的圆角半径为30px，左下角的圆角半径为40px** <b class="card40_249__sup_a7f6" data-sup="sup">2</b>：

```css
    div {
        border: 1px solid black；
        border-radius: 10px 20px 30px 40px；
    }
    ```

4. **设置圆角半径为元素宽度和高度的50%** ：

```css
    div {
        border: 1px solid black；
        border-radius: 50%；
    }
    ```

通过合理使用`border-radius`属性，可以轻松地为网页元素添加美观的圆角边框效果<b class="card40_249__sup_a7f6" data-sup="sup">5</b>。
Top
×
×