语法
border-top-left-radius: length | % | initial | inherit;
这是一个仅使用一个值的 border-top-left-radius 示例。
当我们只给出一个值时，该值指定椭圆的上边框和左边框。
border-top-left-radius 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #8ebf42;
border: 4px solid #000000;
border-top-left-radius: 25px;
}
</style>
</head>
<body>
<h2>Border-top-left-radius example.</h2>
<div></div>
</body>
</html>
在以下示例中，第一个值用于上边框，第二个值用于左边框。
具有两个值的 border-top-left-radius 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #ccc;
border: 4px solid #000000;
border-top-left-radius: 50px 25px;
}
</style>
</head>
<body>
<h2>Border-top-left-radius example.</h2>
<div></div>
</body>
</html>
让我们以百分比来定义盒子的形状。
同样，第一个值定义椭圆的水平半径，第二个值定义椭圆的垂直半径。
带有 "%" 值的 border-top-left-radius 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #eee;
border: 4px solid #000000;
border-top-left-radius: 50% 60%;
}
</style>
</head>
<body>
<h2>Border-top-left-radius example.</h2>
<div></div>
</body>
</html>
CSS border-top-left-radius 指定元素左上角的圆角。
border-top-left-radius 属性是 CSS3 属性之一。
有三种类型的圆形。
它可以是圆形或者椭圆形，也可以不使用任何值，角为方形。
如果我们使用背景图像或者颜色，它将在边框处被剪掉。
裁剪的过程由 background-clip 属性的值定义。
CSS border-top-left-radius 属性由两个值定义：长度和百分比。
当仅使用一个值时，该值指定椭圆的水平和垂直半径。
如果使用两个值，第一个值设置水平半径，第二个值设置垂直半径。
水平半径的百分比是指盒子的宽度，垂直半径的百分比是指盒子的高度。
负值无效。
| 初始值 | 0 |
|---|---|
| 应用于 | 所有元素。它也适用于::first-letter。 |
| 继承 | 不可继承 |
| 可动画的 | 边界的半径可以设置动画。 |
| 版本 | CSS1 |
| DOM 语法 | object.style.borderTopLeftRadius=“25px”； |
CSS border-top-left-radius 属性值说明
| 值 | 说明 |
|---|---|
| length | 定义左上角的圆角。 |
| % | 定义左上角的舍入百分比。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
日期：2020-06-02 22:14:20 来源：oir作者：oir