CSS的圆角边框

诺坎普的风间

已于 2023-03-20 10:01:49 修改

阅读量217

点赞数

分类专栏：前端只因变凤凰之路文章标签： css 前端 html 圆角边框 css的圆角边框 Powered by 金山文档

于 2023-03-20 09:43:10 首次发布

本文链接：https://blog.csdn.net/weixin_62588253/article/details/129660833

版权

前端只因变凤凰之路专栏收录该内容

50 篇文章 2 订阅

订阅专栏

🌟 所属专栏：前端只因变凤凰之路
🐔 作者简介：rchjr——五带信管菜只因一枚
😮 前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉 文章简介：本文介绍CSS的圆角边框。知识学习内容来自b站的 @黑马程序员的视频

🔥原理

border-radius：length用于设置元素的外边框圆角。其中的数值可以为具体值或者百分比。

原理就是利用了圆和边框的交集会形成圆角效果。例如数值为10px，那么就会有一个半径为10px的圆去和边框的四个角分别相交，然后相交的部分就会被圆弧代替

<!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>Document</title>
    <style>
        .box {
            height: 400px;
            width: 400px;
            border-radius: 50%;
            border: 1px solid #543;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

<!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>Document</title>
    <style>
        .box {
            height: 400px;
            width: 200px;
            border-radius: 50%;
            border: 1px solid #543;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

🔥语法总结

如果盒子是正方形，想要变成圆形，让border-radius为50%

如果是矩形，边框要变成圆角，让border-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>Document</title>
    <style>
        .box {
            height: 200px;
            width: 400px;
            border-radius: 100px;
            border: 1px solid #543;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>