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