0
点赞
收藏
分享

微信扫一扫

CSS-圆角边框与半圆

火热如冰 2022-05-25 阅读 17
CSS3html圆角斜杠Html/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>




举报

相关推荐

shape颜色渐变、圆角、半圆角、边框、填充

shapegradientcornerssolidstrokeAndroid移动开发

css圆角边框(css圆角边框无效)

csshtml前端css3javascript虚拟化云计算

CSS|圆角边框

css3csshtml圆角边框Html/CSS前端开发

CSS--圆角边框

css前端html圆角系统/运维

css实现边框双色凹凸半圆

css前端

CSS3 圆角边框

css3JavaScript前端开发

electron无边框与圆角

圆角html无边框electronvueVue.js前端开发

2.4css圆角边框、阴影、浮动

css前端

边框宽度 边框圆角 边框颜色

边框宽度、边框圆角 、边框颜色圆角移动开发

[css] 半圆

html圆角cssWindows系统/运维
0 条评论