html、css中圆角边框

黄丫丫07

已于 2022-11-12 20:46:06 修改

阅读量4.2k

点赞数 6

文章标签： css html 前端

于 2022-11-12 20:08:02 首次发布

本文链接：https://blog.csdn.net/m0_51495354/article/details/127824718

版权

border-radius属性用于设置元素的外边框圆角。

border-radius: 5px;

radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角的效果。

<!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">

    <title>圆角边框</title>

    <style>

        div {

            width: 30px;

            height: 15px;

            margin: auto;

            background-color: aqua;

            border-radius: 5px;

        }

    </style>

</head>



<body>

    <div></div>

</body>



</html>

参数值可以为数值或百分比的形式。

如果是正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可，或者直接写为50%。

如果是圆角矩形，设置为高度的一半就可以

该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角。

分开写：border-top-left-radius,border-top-right-radius,

border-bottom-right-radius,border-bottom-left-radius

<!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">

    <title>圆角边框常用写法</title>

    <style>

        .yuanxing {

            width: 200px;

            height: 200px;

            background-color: aqua;

            /* border-radius: 100px; */

            border-radius: 50%;

        }



        .juxing {

            width: 300px;

            height: 100px;

            background-color: aquamarine;

            /* 圆角矩形中：圆的半径设置为高的一半 */

            border-radius: 50px;



        }



        .radius {

            width: 100px;

            height: 100px;

            background-color: bisque;

            /* border-radius: 5px 10px 15px 20px; */

            /* border-radius: 10px 20px 25px; */

            border-top-left-radius: 10px;

        }

    </style>

</head>



<body>

    1.圆形的做法

    <div class="yuanxing"></div>

    2.圆角矩形的做法

    <div class="juxing"></div>

    3.可以设置不同的圆角

    <div class="radius"></div>

</body>



</html>