css弧线内凹和外凸

<head> 
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

    div {

        width: 400px;

        height: 400px;

        /* border-radius: 0 0 50% / 20px; */

        /* 前面的四个值 400px 400px / 0 0 20px 20px中的前四个数字 400px 400px 分别对应元素的左上角、右上角、右下角和左下角的水平和垂直方向的半径。这里将左上角和右上角的半径设置为很大的值（400px），使得它们实际上变成了直角。

后面的四个数字 / 0 0 20px 20px分别对应左上角、右上角、右下角和左下角的水平和垂直方向的半径比例。这里将左下角和右下角的半径比例设置为 20px，从而实现了一定程度的弧形效果 */

        border-radius: 0 0 400px 400px / 0 0 20px 20px;

        background-color: red;

    }

</style>
</head> <body> 
<div></div>
</body>
posted @ 2024-09-10 16:14  jialiangzai  阅读(58)  评论(0)    收藏  举报