属性定义及使用说明
border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
border-radius 属性是一个最多可指定四个 border-*-radius 属性的复合属性
提示： 这个属性允许你为元素添加圆角边框！
| 默认值: | 0 |
|---|---|
| 继承: | no |
| 版本: | CSS3 |
| JavaScript 语法: | object object.style.borderRadius=”5px” |
语法
border-radius: 1-4 length|% / 1-4 length|%;注意：每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
| 值 | 描述 |
|---|---|
| length | 定义弯道的形状。 |
| % | 使用%定义角落的形状。 |
例如：
border-radius: 1em/5em;
/* 等价于： */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;border-radius: 4px 3px 6px / 2px 4px;
/* 等价于： */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;椭圆边框
border-radius: 15px 50px 30px 5px：第一个值适用于左上角，第二个值适用于右上角，第三个值适用于右下角，第四个值适用于左下角。
椭圆边框
border-radius: 15px 50px 30px：第一个值适用于左上角，第二个值适用于右上角和左下角，第三个值适用于右下角。
椭圆边框
border-radius: 15px 50px：第一个值适用于左上角和右下角，第二个值适用于右上角和左下角。
椭圆边框
border-radius: 15px：该值适用于所有四个角，均等圆角。
OK，我们看下上述实例的演示效果吧。如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(web176.com)</title>
<style>
#rcorners4 {
border-radius: 15px 50px 30px 5px;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners7 {
border-radius: 15px;
padding: 20px;
width: 200px;
height: 150px;
}
.runoob-color {
color: #fff !important;
background-color: #73AD21 !important;
background-color: #04AA6D !important;
}
</style>
</head>
<body>
<p>椭圆边框 - border-radius: 15px 50px 30px 5px：第一个值适用于左上角，第二个值适用于右上角，第三个值适用于右下角，第四个值适用于左下角：</p>
<p id="rcorners4" class="runoob-color"></p>
<p>椭圆边框 - border-radius: 15px 50px 30px：第一个值适用于左上角，第二个值适用于右上角和左下角，第三个值适用于右下角：</p>
<p id="rcorners5" class="runoob-color"></p>
<p>椭圆边框 - border-radius: 15px 50px：第一个值适用于左上角和右下角，第二个值适用于右上角和左下角</p>
<p id="rcorners6" class="runoob-color"></p>
<p>椭圆边框 - border-radius: 15px：该值适用于所有四个角，均等圆角</p>
<p id="rcorners7" class="runoob-color"></p>
</body>
</html>实例应用
1、背景图带边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(web176.com)</title>
<style>
#rcorners {
border-radius: 25px;
background: url(/wp-content/uploads/2022/02/CSS.jpg);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>背景图带边框:</p>
<div id="rcorners">圆角边框!</div>
</body>
</html>2、不同类型参数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(web176.com)</title>
<style>
#rcorners7 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>椭圆边框 - border-radius: 50px/15px:</p>
<p id="rcorners7"></p>
<p> 椭圆边框 - border-radius: 15px/50px:</p>
<p id="rcorners8"></p>
<p>椭圆边框 - border-radius: 50%:</p>
<p id="rcorners9"></p>
</body>
</html>3、不同参数个数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(web176.com)</title>
<style>
#rcorners4 {
border-radius: 15px 50px 30px 5px;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners7 {
border-radius: 15px;
padding: 20px;
width: 200px;
height: 150px;
}
.runoob-color {
color: #fff !important;
background-color: #73AD21 !important;
background-color: #04AA6D !important;
}
</style>
</head>
<body>
<p>椭圆边框 - border-radius: 15px 50px 30px 5px：第一个值适用于左上角，第二个值适用于右上角，第三个值适用于右下角，第四个值适用于左下角：</p>
<p id="rcorners4" class="runoob-color"></p>
<p>椭圆边框 - border-radius: 15px 50px 30px：第一个值适用于左上角，第二个值适用于右上角和左下角，第三个值适用于右下角：</p>
<p id="rcorners5" class="runoob-color"></p>
<p>椭圆边框 - border-radius: 15px 50px：第一个值适用于左上角和右下角，第二个值适用于右上角和左下角</p>
<p id="rcorners6" class="runoob-color"></p>
<p>椭圆边框 - border-radius: 15px：该值适用于所有四个角，均等圆角</p>
<p id="rcorners7" class="runoob-color"></p>
</body>
</html>4、简写格式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(web176.com)</title>
<style>
#example1 {
border: 2px solid red;
padding: 10px;
border-radius: 2em / 5em;
}
#example2 {
border: 2px solid red;
padding: 10px;
border-radius: 2em 1em 4em / 0.5em 3em;
}
</style>
</head>
<body>
<h2>border-radius: 2em / 5em:</h2>
<div id="example1">
<p>等价于: border-top-left-radius: 2em 5em; border-top-right-radius: 2em 5em; border-bottom-right-radius: 2em 5em; border-bottom-left-radius: 2em 5em;</p>
</div>
<h2>border-radius: 2em 1em 4em / 0.5em 3em:</h2>
<div id="example2">
<p>等价于: border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;</p>
</div>
</body>
</html>希望能够帮助到大家！
作者：terry，如若转载，请注明出处：https://www.web176.com/cssprop/5644.html
支付宝 
微信 