圆角边框（border-radius属性 border-radius使用规则）

最新推荐文章于 2022-10-31 10:36:23 发布

卡夫卡的baby

最新推荐文章于 2022-10-31 10:36:23 发布

阅读量619

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_72303943/article/details/125966166

版权

css3 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS3中的border-radius属性，用于创建元素的圆角效果。通过设置不同角落的弧度，可以实现自定义的圆角样式。示例代码展示了如何为盒子模型设置圆角，包括单独设置每个角的弧度以及使用简写形式。此外，还解释了border-radius的值使用规则，如四个值、三个值的设定方式。这有助于开发者更好地理解和应用border-radius来美化网页元素。

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

1 、border-radius属性

，你可以给任何元素制作 "圆角"。使用这个属性，我们要写一些浏览器的内核标识码：-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。

圆角属性：

属性	描述
border-radius	所有四个边角 border---radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

代码如下：

<title>border-radius属性</title>
    <style>
        .box{
            width: 300px;
            height: 150px;
            background-color: pink;
            margin: 50px auto ;
            /* 圆角半径 */

            /* 左上角的弧度 */
            /* border-top-left-radius: 50px; */
            /* 右上角的弧度 */
            /* border-top-right-radius: 50px; */
            /* 左下角的弧度 */
            /* border-bottom-left-radius: 50px; */
            /* 右下角的弧度 */
            /* border-bottom-right-radius: 50px; */

            /* 大属性 */
            border-radius: 50px;
        }


        /* 绘制正圆
        （1）本身是一个 正方形
        （2）圆角半径 取 宽度的一半 或者 设置为宽度的50% */
        .box1{
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 50px auto ;
            /* 圆角半径 */
            /* border-radius: 150px; */
            border-radius: 50%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1">
        <img src="./img/5.webp" alt="" width="300" height="300">
    </div>

border-radius: 20px; 简写

等价于

border-top-left-radius: 20px; 全写border-top-right-radius: 20px;border-bottom-right-radius: 20px;border-bottom-left-radius: 20px;

预览：

2 、border-radius使用规则

border-radius指定值的使用规则

如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

代码如下：

<title> border-radius使用规则</title>
    <style>
        .box{
            width: 300px;
            height: 150px;
            background-color: pink;
            margin: 50px auto ;
            /* 圆角半径 */
            /* 大属性 */
            /* 左上 右上 右下 左下 */
            /* border-radius: 50px 20px 40px 10px; */

            /* border-radius: 50px(左上) 100px(右上、左下) 20px(右下) ; */

            /* 左上、右下    右上、左下 */
            border-radius: 300px 100px;
        }


       
    </style>
</head>
<body>
    <div class="box"></div>