border-radius不仅仅可以用来画圆哦

最新推荐文章于 2024-04-18 15:07:49 发布

Spider--Man

最新推荐文章于 2024-04-18 15:07:49 发布

阅读量652

点赞数

分类专栏： css 文章标签： leetcode css

本文链接：https://blog.csdn.net/wojiong132/article/details/66563185

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

border-radius

可以设置四个角的值
每个角的值可以设置为百分比或长度
每个角可以设置水平或垂直方向的值

<html>

<head>
    <meta charset="utf-8">
    <style>
        .circle {
            width: 100px;
            height: 100px;
            background-color: #fb3;
            border-radius: 50%;
        }

        .ellipse {
            width: 100px;
            height: 50px;
            background-color: #fb3;
            /*百分比*/
            border-radius: 50%;
        }

        .half-ellipse-top {
            width: 100px;
            height: 50px;
            background-color: #fb3;
            /*top-left,top-right,bottom-right,bottom-left*/
            /* 水平方向/垂直方向*/
            border-radius: 50% / 100% 100% 0 0;
        }

        .half-ellipse-left {
            width: 100px;
            height: 50px;
            background-color: #fb3;
            /*top-left,top-right,bottom-right,bottom-left*/
            /* 水平方向/垂直方向*/
            border-radius: 100% 0 0 100% / 50%;
        }

        .quarter-ellipse {
            width: 100px;
            height: 50px;
            background-color: #fb3;
            /*top-left,top-right,bottom-right,bottom-left*/
            /* 水平方向/垂直方向*/
            border-radius: 100% 0 0 0;
        }

        .diagonal {
            width: 200px;
            height: 100px;
            border-radius: 40px 10px;
            background-color: #fb3;
        }

        .box {
            border: ridge gold;
            border-radius: 13em/3em;
            width: 200px;
            height: 100px;
            background-color: #fb3;
        }
    </style>
</head>

<body>
    <div class="circle"></div>
    <div class="ellipse"></div>
    <div class="half-ellipse-top"></div>
    <div class="half-ellipse-left"></div>
    <div class="quarter-ellipse"></div>
    <div class="diagonal"></div>
    <div class="box"></div>
</body>

</html>

这里写图片描述

Spider--Man

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
border-radius不仅仅可以用来画圆哦

border-radius可以设置四个角的值每个角的值可以设置为百分比或长度每个角可以设置水平或垂直方向的值<html><head> <meta charset="utf-8"> <style> .circle { width: 100px; height: 100px; backgrou
复制链接

扫一扫