border-radius圆角实现曲边效果
border-bottom-left-radius:向 div 元素的左下角添加圆角边框
定义和用法
border-bottom-left-radius
属性定义左下角边框的形状。
提示：该属性允许您向元素添加圆角边框。
| 默认值： | 0 |
|---|
| 继承性： | no |
|---|
| 版本： | CSS3 |
|---|
| JavaScript 语法： | object.style.borderBottomLeftRadius="5px" |
|---|
语法
border-bottom-left-radius: length|% [length|%];
注释：border-bottom-left-radius
属性的长度值和百分比值定义四分之一椭圆（定义外部边框边缘的边角形状）的半径（radii）。第一个值是水平半径，第二个值是垂直半径。如果省略第二个值，则复制第一个值。如果长度为零，则边角为方形，而不是圆形。水平半径的百分比值参考边框盒的宽度，而垂直半径的百分比值参考边框盒的高度。
| 值 | 描述 |
|---|
| length | 定义左下角的形状。 |
| % | 以百分比值定义左下角的形状。 |
以下实例：
实例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> border-radius圆角实现曲边效果
</title>
<style>
.l_div{
border:2px solid;
border-bottom-left-radius:2em;
}
</style>
</head>
<body>
<br>
<div class="l_div"
style="width:200px;height:200px;background:#aa0f77;"></div>
<br>
</body>
</html>
|
类似的：
border-bottom-right-radius 属性的长度值和百分比值定义四分之一椭圆（定义外部边框边缘的边角形状）的半径（radii）。第一个值是水平半径，第二个值是垂直半径。如果省略第二个值，则复制第一个值。如果长度为零，则边角为方形，而不是圆形。水平半径的百分比值参考边框盒的宽度，而垂直半径的百分比值参考边框盒的高度。
border-top-right-radius 属性的长度值和百分比值定义四分之一椭圆（定义外部边框边缘的边角形状）的半径（radii）。第一个值是水平半径，第二个值是垂直半径。如果省略第二个值，则复制第一个值。如果长度为零，则边角为方形，而不是圆形。水平半径的百分比值参考边框盒的宽度，而垂直半径的百分比值参考边框盒的高度。
border-top-left-radius 属性的长度值和百分比值定义四分之一椭圆（定义外部边框边缘的边角形状）的半径（radii）。第一个值是水平半径，第二个值是垂直半径。如果省略第二个值，则复制第一个值。如果长度为零，则边角为方形，而不是圆形。水平半径的百分比值参考边框盒的宽度，而垂直半径的百分比值参考边框盒的高度。
实现曲边效果实例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> border-radius圆角实现曲边效果
</title>
</style>
</head>
<body>
<div
style="width:200px;height:200px;background:#aa0f77;border-bottom-left-radius:
20px 200px; border-bottom-right-radius: 500px 30px;
border-top-right-radius: 5px 100px;"></div>
</body>
</html>
|
