边框圆角的作用
将原始的直角变为圆角
格式如下
border-radius: 100px 0px 0px 0px;
第一个参数:指定左上角的半径,如上的四个参数,按照 左上 / 右上 / 右下 / 左下 的顺序来编写的
如果省略一个参数, 会变成对角的值
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框圆角基本概念</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
}
.father>.son{
width: 200px;
height: 200px;
background-color: pink;
border-radius: 100px 80px 40px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
如果省略两个参数, 会变成对角的值
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框圆角基本概念</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
}
.father>.son {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 100px 80px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
如果省略三个参数, 其它角会和它一样
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框圆角基本概念</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
}
.father > .son {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
如果指定的半径是当前元素宽高的一半, 那么就是一个圆形
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框圆角基本概念</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
}
.father > .son {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
单独指定圆角和椭圆
单独指定某一个角的半径
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单独指定圆角和椭圆</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 100px;
border: 1px solid #000;
margin: 100px auto;
}
.father > .son {
width: 200px;
height: 100px;
background-color: pink;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单独指定圆角和椭圆</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 100px;
border: 1px solid #000;
margin: 100px auto;
}
.father > .son {
width: 200px;
height: 100px;
background-color: pink;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
如果传递了两个参数, 那么第一个参数代表水平方向的半径, 第二个参数代表垂直方向的半径
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单独指定圆角和椭圆</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 100px;
border: 1px solid #000;
margin: 100px auto;
}
.father > .son {
width: 200px;
height: 100px;
background-color: pink;
border-top-left-radius: 100px 50px;
border-top-right-radius: 100px 50px;
border-bottom-left-radius: 100px 50px;
border-bottom-right-radius: 100px 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
斜杠之前的代表左上 / 右上 / 右下 / 左下的水平方向的半径,斜杠之后的代表左上 / 右上 / 右下 / 左下的垂直方向的半径
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单独指定圆角和椭圆</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 100px;
border: 1px solid #000;
margin: 100px auto;
}
.father > .son {
width: 200px;
height: 100px;
background-color: pink;
border-radius: 100px 100px 100px 100px/50px 50px 50px 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单独指定圆角和椭圆</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 100px;
border: 1px solid #000;
margin: 100px auto;
}
.father > .son {
width: 200px;
height: 100px;
background-color: pink;
border-radius: 100px/50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
绘制半圆
规律
- 如果边框的宽度小于圆角的半径, 那么内圆和外圆都是圆弧形状
- 如果边框的宽度大于或者等于圆角的半径, 那么内圆就会变成直角而不是圆角
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制半圆</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
border: 110px solid #000;
margin: 100px auto;
border-radius: 110px;
}
.father > .son {
width: 200px;
height: 200px;
background-color: pink;
border-top-left-radius: 100px 100px;
border-top-right-radius: 100px 100px;
border-bottom-left-radius: 100px 100px;
border-bottom-right-radius: 100px 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>