border-bottom-left-radius

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

尝试一下

圆角可以是圆形或椭圆形,如果其中一个值为 0,则不进行圆角处理,角保持为直角。

border-bottom-left-radius.png

背景(无论是图片还是颜色)都会被边框处裁剪,即便是圆角边框也不例外;裁剪的具体位置由 background-clip 属性的值来定义。

备注: 如果 border-bottom-left-radius CSS 属性之后的元素的 border-radius 简写属性中未设置此属性值,该属性值将会被简写属性重置为其默认初始值。

语法

css
/* 角为圆形 */
/* border-bottom-left-radius: radius */
border-bottom-left-radius: 3px;

/* 百分比值 */

/* 如果盒子是正方形,则为圆形,如果盒子是矩形,则为椭圆形 */
border-bottom-left-radius: 20%;

/* 如上所述:分别是水平方向(宽度)和垂直方向(高度)的 20% */
border-bottom-left-radius: 20% 20%;

/* 水平方向(宽度)的 20% 和垂直方向(高度)的 10% */
border-bottom-left-radius: 20% 10%;

/* 角为椭圆形 */
/* border-bottom-left-radius: 水平 垂直 */
border-bottom-left-radius: 0.5em 1em;

/* 全局值 */
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>

表示圆的半径尺寸或椭圆的半长轴和半短轴尺寸。作为绝对长度,它可以使用任何的 CSS <length> 数据类型进行表示。水平轴上的百分比是指盒子宽度的百分比,而垂直轴上的百分比是指盒子高度的百分比。负值是无效的。

形式定义

初始值0
适用元素all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter.
是否是继承属性
Percentagesrefer to the corresponding dimension of the border box
计算值two absolute <length>s or <percentage>s
动画类型a length, percentage or 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;
}

规范

Specification
CSS Backgrounds and Borders Module Level 3
# border-radius

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-bottom-left-radius
Elliptical corners
Percentages

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
See implementation notes.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见