- 什么是边框圆角?
----将直角的边框变为圆角的边框 - 边框圆角的格式?
----border-radious:左上 右上 右下 左下; - 将正方形变为圆形的技巧
border-radious:50%; - 系统如何绘制圆角?
首先根据指定的值找到圆心,按照指定的值作为半径绘制圆弧; - 边框圆角注意点
1、当某个省略角后系统会自动参考对角的值
.one{
width: 200px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
margin: 100px auto;
border-radius: 100px 50px 100px ;
}
2、当只设置了一个值的时候,其他三个角都会参考这个值
.two{
width: 200px;
height: 200px;
border: 50px solid #000;
box-sizing: border-box;
margin: 100px auto;
border-radius: 100px;
3 当边框圆角的值》边框宽度的时候,外边框和内边框都会变为圆角
当边框圆角的值《边框宽度的时候,外边框和会变为圆角,内边距是直角
.two{
width: 200px;
height: 200px;
border: 50px solid #000;
box-sizing: border-box;
margin: 100px auto;
border-radius: 50px;
}
3 可以通过border-radious-xxx-xx-radious的方式单独设置某一个角的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>半圆椭圆</title>
<style>
*{
padding:0px;
margin: 0px;
}
/*半圆1*/
.one{
width: 200px;
/*height: 200px;*/
/*高度减一半*/
height: 100px;
margin: 100px auto;
border: 1px solid #000;
box-sizing: border-box;
border-radius:100px 100px 0 0;
}
/*半圆2*/
.two{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid #000;
box-sizing: border-box;
/*水平方向 垂直方向
参数一样看前面的值做参考
*/
border-top-left-radius:100px 100px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
- 绘制椭圆:设置水平方向为宽度的一半,设置垂直方向为高度的一半 长方形变为椭圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>半圆椭圆</title>
<style>
*{
padding:0px;
margin: 0px;
}
/*半圆1*/
.one{
width: 200px;
/*height: 200px;*/
/*高度减一半*/
height: 100px;
margin: 100px auto;
border: 1px solid #000;
box-sizing: border-box;
border-radius:100px 100px 0 0;
}
/*半圆2*/
.two{
width: 200px;
height: 100px;
margin: 100px auto;
border: 1px solid #000;
box-sizing: border-box;
/*水平方向 垂直方向*/
border-top-left-radius:100px 100px;
border-top-right-radius:100px 100px;
}
.three{
width: 400px;
height: 200px;
margin: 100px auto;
border: 1px solid #000;
box-sizing: border-box;
border-top-left-radius:200px 100px;
border-top-right-radius:200px 100px;
border-bottom-left-radius:200px 100px;
border-bottom-right-radius:200px 100px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>