border-bottom-left-radius

**border-bottom-left-radius** CSS 属性通过指定定义拐角曲率的椭圆的半径（或半长轴和半短轴的半径）来对元素的左下角进行圆角处理。

试试看

圆角可以是圆形或椭圆形，如果其中一个值为0，则不进行圆角处理，拐角为方形。

border-bottom-left-radius.png

背景，无论是图像还是颜色，都将在边框处裁剪，即使是圆角边框；裁剪的确切位置由 background-clip 属性的值定义。

**注意：**如果此属性的值未在 border-radius 简写属性中设置，该属性应用于元素，在border-bottom-left-radius CSS 属性之后，则此属性的值将被 简写属性 重置为其初始值。

语法

css
/* the corner is a circle */
/* border-bottom-left-radius: radius */
border-bottom-left-radius: 3px;

/* Percentage values */

/* circle if box is a square or ellipse if box is a rectangle */
border-bottom-left-radius: 20%;

/* same as above: 20% of horizontal(width) and vertical(height) */
border-bottom-left-radius: 20% 20%;

/* 20% of horizontal(width) and 10% of vertical(height) */
border-bottom-left-radius: 20% 10%;

/* the corner is an ellipse */
/* border-bottom-left-radius: horizontal vertical */
border-bottom-left-radius: 0.5em 1em;

/* Global values */
border-bottom-left-radius: inherit;
border-bottom-left-radius: initial;
border-bottom-left-radius: revert;
border-bottom-left-radius: revert-layer;
border-bottom-left-radius: unset;

具有一个值

具有两个值

  • 第一个值是 <length> 或 <percentage>，表示用于该拐角处边框的椭圆形水平半长轴。
  • 第二个值是 <length> 或 <percentage>，表示用于该拐角处边框的椭圆形垂直半长轴。

值

<length-percentage>

表示圆形半径的大小或椭圆形半长轴和半短轴的大小。作为绝对长度，它可以用 CSS <length> 数据类型允许的任何单位表示。水平轴的百分比表示框的宽度，垂直轴的百分比表示框的高度。负值无效。

正式定义

初始值0
应用于所有元素；但用户代理不需要将它们应用于 border-collapse 为collapse 时 的table 和inline-table 元素。目前，内部表格元素的行为是未定义的。它也适用于 ::first-letter。
继承否
百分比指的是边框框的对应尺寸
计算值两个绝对 <length> 或 <percentage>
动画类型一个 <length>、<percentage> 或 calc();

正式语法

border-bottom-left-radius = 
  <length-percentage [0,∞]>{1,2}  

<length-percentage> = 
  <length>      |
  <percentage>

示例

圆形弧

单个<length> 值生成圆形弧。

css
div {
  border-bottom-left-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

椭圆形弧

两个不同的<length> 值生成椭圆形弧。

css
div {
  border-bottom-left-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

具有百分比半径的方形元素

具有单个<percentage> 值的方形元素生成圆形弧。

css
div {
  border-bottom-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

非正方形元素的百分比圆角

非正方形元素使用单个 `<percentage>` 值会产生椭圆弧。

css
div {
  border-bottom-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}

规范

规范
CSS 背景和边框模块级别 3
# border-radius

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅