0
点赞
收藏
分享

微信扫一扫

CSS-圆角边框与半圆

边框圆角的作用

将原始的直角变为圆角

格式如下

border-radius: 100px 0px 0px 0px;

第一个参数:指定左上角的半径,如上的四个参数,按照 左上 / 右上 / 右下 / 左下 的顺序来编写的

如果省略一个参数, 会变成对角的值

<!DOCTYPE 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 40px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>

如果省略两个参数, 会变成对角的值

<!DOCTYPE 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>

如果省略三个参数, 其它角会和它一样

<!DOCTYPE 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>

如果指定的半径是当前元素宽高的一半, 那么就是一个圆形

<!DOCTYPE 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>

单独指定圆角和椭圆

单独指定某一个角的半径

<!DOCTYPE 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>
<!DOCTYPE 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>

如果传递了两个参数, 那么第一个参数代表水平方向的半径, 第二个参数代表垂直方向的半径

<!DOCTYPE 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>

斜杠之前的代表左上 / 右上 / 右下 / 左下的水平方向的半径,斜杠之后的代表左上 / 右上 / 右下 / 左下的垂直方向的半径

<!DOCTYPE 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>
<!DOCTYPE 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>

绘制半圆

规律

  • 如果边框的宽度小于圆角的半径, 那么内圆和外圆都是圆弧形状
  • 如果边框的宽度大于或者等于圆角的半径, 那么内圆就会变成直角而不是圆角
<!DOCTYPE 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>




举报

相关推荐

0 条评论