绘制四分之一圆、半圆、椭圆、半椭圆(向上）

最新推荐文章于 2024-05-29 19:01:50 发布

正在修炼web的小芮

最新推荐文章于 2024-05-29 19:01:50 发布

阅读量962

点赞数 1

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/m0_71814235/article/details/125933778

版权

css3 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

绘制圆角矩形

    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: pink;
            border: 1px solid black;
            margin: 30px auto;
            border-top-left-radius: 300px;
        }
    </style>
</head>
<body>
    <div class="box box1"></div>
</body>

效果：

半圆

    <style>
         .box{
            width: 300px;
            /* height: 150px;半圆 height: 300px;正圆 */
            height: 150px;
            background-color: skyblue;
            border: 1px solid black;
            margin: 30px auto;
            border-top-left-radius: 150px;
            border-top-right-radius: 150px;
         }
    </style>
</head>
<body>
    <div class="box box1"></div>
</body>

效果：

CSS3: border-radius绘制椭圆

语法：

border-radius: 1-4 length|% / 1-4 length|%;

一般写法： border-radius: 50%;

等价于： border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; （左上，右上，右下，左下）

"/"之前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径。

绘制椭圆

    <style>
        .box{
            width: 500px;
            height: 300px;
            background-color: pink;
            /* 椭圆 */
            /* 250px --水平半径（是盒子宽度的一半）*/
            /* 150px --垂直半径（是盒子高度的一半） */
            /* border-radius: 250px/150px; */


            /* 50% -- 水平半径 （是盒子宽度的50%）*/
            /* 50% -- 垂直半径 （是盒子高度的50%） */
            border-radius: 50%/50%;
        }
    </style>
</head>
<body>
    <div class="box box1"></div>
</body>

预览：

绘制半椭圆(向上）

    <style>
        .box{
            width: 500px;
            height: 150px;
            background-color: yellow;
            margin-top: 200px;
            /* 半椭圆 */
            border-radius: 50% 50% 50% 50%/0 0 100% 100%;
        }
    </style>
</head>
<body>
    <div class="box box1"></div>
</body>

预览：