html-1 圆角边框的常用写法

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=ed

独钓寒江雪～

2506人浏览 · 2021-12-22 10:31:42

独钓寒江雪～ · 2021-12-22 10:31:42 发布

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>圆角边框常用的写法</title>
        <style>
            .yuanxing{
                width: 200px;
                height: 200px;
                background-color: green;
                border-radius: 50%;
            }
            .juxing{
                width: 300px;
                height: 100px;
                background-color: green;
                border-radius: 50px;
            }
            .radius{
                width: 200px;
                height: 200px;
                border-top-left-radius: 20px;
                background-color: gray;
            }
        </style>
    </head>
    <body>
        1.圆形的做法
        <div class="yuanxing">

        </div>
        2.圆角矩形的做法
        <div class="juxing">

        </div>
        3.可以设置不同的圆角
        <div class="radius">

        </div>
    </body>
</html>

在这里插入图片描述