前端-CSS-圆角边框原理

byte~byte

已于 2023-09-25 15:57:56 修改

阅读量246

点赞数

文章标签： python 开发语言

于 2023-04-26 13:32:19 首次发布

本文链接：https://blog.csdn.net/m0_65972736/article/details/130383782

版权

文章详细讲解了CSS3中新增的圆角边框样式border-radius，包括如何设置边框为圆角，参数值的使用方法，以及不同参数值对边框弧度的影响。通过示例代码展示了如何创建圆形、圆角矩形以及设置不同圆角大小的效果。

摘要由CSDN通过智能技术生成

1、在CSS3中，新增加了圆角边框样式，由此我们所设置的边框可以变成圆角。

2、语法：

border-radius:length;

参数值可以用数值或百分比的形式来表示，参数值length越大，圆框弧度越大。

3、示例：

<!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>
        div {
            width: 300px;
            height: 200px;
            background-color: burlywood;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div></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>
        .a1 {
            width: 200px;
            height: 200px;
            background-color: burlywood;
            border-radius: 50%;
        }

        .a2 {
            width: 300px;
            height: 100px;
            background-color: burlywood;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }

        .a3 {
            width: 200px;
            height: 200px;
            background-color: burlywood;
            /* 四个角分别为左上、右上、右下、左下顺序 */
            /* 两个数值分别为左上右下、右上左下 */
            border-radius: 10px 20px 30px 40px;

        }
    </style>
</head>

<body>
    1、圆形
    <div class="a1"></div>
    2、圆角矩形
    <div class="a2"></div>
    3、可以设置不同的圆角
    <div class="a3"></div>
</body>

</html>

运行结果如下：

也可分别设置各个角：

左上：border-top-left-radius

右上：border-top-right-radius

左下：border-bottom-left-radius

右下：border-bottom-right-radius

byte~byte

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端-CSS-圆角边框原理

右下：border-bottom-right-radius。左下：border-bottom-left-radius。右上：border-top-right-radius。左上：border-top-left-radius。的形式来表示，参数值length越大，圆框弧度越大。样式，由此我们所设置的边框可以变成圆角。1、在CSS3中，新增加了。
复制链接

扫一扫