CSS 属性

CSS border-radius 属性用于使元素外边框的角变圆。

  • 要使角变圆，添加一个半径值并使其成为椭圆形，添加两个半径值。

  • border-radius 属性应用于整个背景，即使没有指定边框

  • 当 border-collapse 属性设置为折叠时，border-radius 属性不会应用于表格元素。

  • border-radius 属性不会应用于表格元素。 radius 属性是以下 CSS 属性的简写:

    • border-top-left-radius:将元素的左上角圆角化。

    • border-top-right-radius:使元素的右上角圆角。

    • border-bottom-right-radius:使右下角圆角元素的左下角。

    • border-bottom-left-radius:将元素的左下角圆角化。

属性值

  • <length>:使用长度值表示圆半径的大小。负值无效。

  • <percentage>:使用百分比值表示圆半径的大小。

    • 横轴百分比指的是框的宽度。

    • 纵轴百分比指的是框的高度。框。

    • 负值无效。

border-radius 属性可以具有上述值，如下所示:

  • 一个、两个、三个或四个值作为 <length> 或 <percentage>: 用于设置单个半径

  • 后跟"/"和一个、两个、三个或四个值，如 <length> 或 <percentage>: 用于设置椭圆角。

下面给出的表格显示了传递的值及其含义:

序号属性与说明
1

radius

表示边框的半径。一值语法。

2

top-left-and-bottom-right

表示边框左上角和右下角的半径。二值语法。

3

top-right-and-bottom-left

表示边框右上角和左下角的半径。二值和三值语法。

4

top-left

表示边框左上角的半径。三值和四值语法。

5

top-right

表示边框右上角的半径。四值语法。

6

bottom-right

表示边框右下角的半径。三值和四值语法。

7

bottom-left

表示边框左下角的半径。四值语法。

适用范围

除不可替换的内联元素、表格行和行组之外的所有 HTML 元素.

DOM 语法

object.style.borderRadius = "20px | 20px 20px | 5% 15px";

示例

这里是一个示例:

<html>
<style>
   div.box {
      height: 50px;
      width: 50px;
      display: inline-block;
      padding: 5px;
      border: 1px solid black;
   }
   #m {
      border-radius: 20px;
      background-color: aqua;
   }
   #n {
      border-radius: 5% 30px;
      background-color: salmon;
   }
   #o {
      border-radius: 15px 20px 30px;
      background-color: yellow;
   }
   #p {
      border-radius: 20px 3% 20px 5%;
      background-color: blue;
   }
</style>
<head>
</head>
<body>
   <div id="m" class="box"></div>
   <div id="n" class="box"></div>
   <div id="o" class="box"></div>
   <div id="p" class="box"></div>
</body>
</html>