css--->圆角设置
1.为元素添加四个相同的圆角：
语法结构：border-radius：r；
r为圆角的半径大小
eg:如下样式，给元素添加四个圆角为10px
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.为元素创建一个圆角
语法结构：
左上角：border-top-left-radius: r ；
右上角：border-top-right-radius: r ；
左下角：border-bottom-left-radius: r ；
右下角：border-bottom-right-radius: r ；
eg:如下样式，给元素添加左上角圆角为30px
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
border-top-left-radius: 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.为元素创建一个椭圆角
语法结构：
左上角：border-top-left-radius: x y ；
右上角：border-top-right-radius:x y ；
左下角：border-bottom-left-radius: x y ；
右下角：border-bottom-right-radius: x y ；
其中x表示圆角在水平方向上的半径大小，y表示圆角在垂直方向上的半径大小
eg:如下样式，给元素添加左上角圆角在水平方向上为10px，在垂直方向上为30px
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
border-top-left-radius: 10px 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.圆形设置：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
方法2：
定义:radius:50%(永远为容器的一半)
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.半圆设置：
语法结构：
border-radius:r1 r2 0 0;
其中r1和r2是左右上角的半径大小，左下角和右小角设置为0
设定条件:r1=r2=1/2width=height
eg:设定一个直径为100px的半圆
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 100px;
height: 50px;
background-color: aqua;
border-radius: 50px 50px 0 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6.椭圆形设置：
语法结构：
border-radius:x/y;
其中x表示圆角在水平方向上的半径大小，y表示圆角在垂直方向上的半径大小
eg:设置一个与容器为w:200px,h:100px内相切的一个椭圆形
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 200px;
height: 100px;
background-color: aqua;
border-radius: 100px/50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
7.给radius赋多个值的含义：
(1) border-radius：r1 r2;
其中r1是左上角和右下角的半径大小，r2是左下角和右上角的半径大小
eg:如下样式，左上角和右下角的半径为10px,左下角和右上角的半径为30px
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 10px 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
(2) border-radius：r1 r2 r3 r4;
其中r1是左上角半径大小,r2是右上角半径大小，r3是右下角半径大小,r4是左下角半径大小
eg:如下样式，左上角半径大小10px,右上角半径大小20px，右下角半径大小30px,左下角半径大小40px
代码如下；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>