HTML + CSS box model cases (circle, semicircle, etc.) “border radius” is simple and easy to use

Time:2021-7-27

When learning at the front end, many children find that the box model defaults to square. How to turn the box into the desired model? First, let’s look at the default—-


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: rgb(116, 51, 51);
            box-shadow:0 10px 10px red;
            text-align: center;
            position:absolute;
            margin:0 auto;   
            left:0;
            right:0;
            bottom:0;
            top:0;

        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="box">

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

在这里插入图片描述

By default, it is square. Maybe the little partner doesn’t think it looks good. Let’s try the round one!


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgb(28, 99, 60);
            border: 5px solid rgb(55, 0, 255);
            position: absolute;
            margin: 0 auto;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
        }
    </style>
    <title>Round</title>
</head>
<body>
    <div class="box">

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

在这里插入图片描述

Look, we’ve become a circle! Look at the semicircle!


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box{
            width: 100px;
            height: 50px;
            background-color: rgb(175, 42, 216);
            border: 3px solid rgb(26, 236, 26);
            border-top-right-radius: 50px;
            border-top-left-radius: 50px;
            position:absolute;
            margin: 0 auto;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
        }
    </style>
    <title>semicircle</title>
</head>
<body>
    <div class="box">

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

在这里插入图片描述

Try other shapes!


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: rgb(82, 84, 223);
            border-radius: 20px 15px 20px 10px;
            position: absolute;
            margin: 0 auto;
            left: 0;
            bottom: 0;
            right: 0;
            top: 0;
        }
    </style>
    <title>demo</title>
</head>
<body>
    <div class="box">

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

在这里插入图片描述

Knowledge point analysis:

Border radius: sets a rounded border for an element
It can realize various fillet graphics such as circle, semicircle, ellipse, quarter circle and so on.
Four values can be set: upper left, upper right, lower right and lower left
Give me a formula, “move clockwise from the top left”…

I hope this article can let you learn the border radius attribute!

This is the end of this simple article about html + CSS box model cases (circle, semicircle, etc.) “border radius”. For more relevant HTML CSS box model content, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!