| CSS边框圆角 | 您所在的位置：网站首页 › css边框变圆角 › CSS边框圆角 |
CSS边框圆角
|
1.什么是边框圆角？
就是把矩形边框变成圆角边框，就叫做边框圆角。 2.设置边框圆角的格式2.1 border-radius: 100px 100px 100px 100px; border-radius的顺序为:左上，右上，右下，左下。从左上角开始顺时针旋转。 也可以分开写成： border-top-left-radius: 100px; 左上 border-top-right-radius: 100px; 右上 border-bottom-right-radius: 100px; 右下 border-bottom-left-radius: 100px; 左下举例： .radius{ width: 100px; height: 100px; border: 1px solid #000; box-sizing: border-box; border-radius: 100px 100px 100px 100px; }
image.png
2.2四个角的数值相同也可以写成一个
border-radius: 100px;
.radius{
width: 100px;
height: 100px;
border: 1px solid #000;
box-sizing: border-box;
border-radius: 100px;
}
image.png
3.border-radius的原理
.div{
width: 200px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
margin: 0 auto;
margin-top: 200px;
border-top-left-radius:100px;
}
border-top-left-radius:100px; 也可以写成： border-top-left-radius:100px 100px; 水平方向100px 竖直方向100px 根据水平方向的100px和竖直方向的100px找到圆心，然后画弧。 
image.png
同理，根据水平方向的100px和竖直方向的100px找到圆心，然后画弧。 .div{ width: 200px; height: 200px; border: 1px solid #000; box-sizing: border-box; margin: 0 auto; margin-top: 200px; border-top-right-radius:100px; }
image.png
4.利用border-radius可以画出很多图形
根据原理，让border-radius的值等于width的50%，就可以画出圆。
.radius{
width: 200px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
margin: 0 auto;
margin-top: 200px;
border-radius: 50%;
}
image.png
椭圆： border-top-left-radius:100px 50px; 水平方向100px 竖直方向50px 让左上角的水平方向为100px(宽的一半) 竖直方向为50px(高的一半) .radius{ width: 200px; height: 100px; border: 1px solid #000; box-sizing: border-box; margin: 0 auto; margin-top: 200px; /*重点*/ border-top-left-radius:100px 50px; border-top-right-radius:100px 50px ; border-bottom-right-radius:100px 50px ; border-bottom-left-radius: 100px 50px; }
image.png
叶子 .radius{ width: 200px; height: 100px; border: 1px solid #000; box-sizing: border-box; margin: 0 auto; margin-top: 200px; border-top-left-radius: 200px 100px; border-bottom-right-radius: 200px 100px; }
image.png
注意：
1.border-radius的值有些可以省略
border-radius:100px 50px;
右下角会参考他对角左上角的值，左下角会参考他对角右上角的值
image.png
2. 当边框圆角的值 < 边框的宽度时，外边框是圆角 内边框是直角 当边框圆角的值 > 边框的宽度时，外边框和内边框都会变成圆角 
image.png
image.png
image.png
我正在跟着江哥学编程,更多前端+区块链课程: www.it666.com |
【本文地址】
公司简介
联系我们