椭圆边框

通过设置border-radius 的两个半径 来形成椭圆边框

比如 、border-radius: 50px/15px;

<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <style>
        div {
            width: 130px;
            height: 130px;
            background-color: red;
            margin-bottom:10px;
        }

            div#d1 {
                border-radius: 50%;
            }

            div#d2 {
                border-radius: 15px/50px;
            }

            div#d3 {
                border-radius: 50px/15px;
            }

    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</body>Code language: HTML, XML (xml)

圆角属性

属性 描述

border-radius 所有四个边角 border-*-*-radius 属性的缩写

border-top-left-radius 定义了左上角的弧度

border-top-right-radius 定义了右上角的弧度

border-bottom-right-radius 定义了右下角的弧度

border-bottom-left-radius 定义了左下角的弧度

Previous:

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注