border-radius属性的使用方法

最新推荐文章于 2023-01-28 20:58:03 发布

糯米味儿的粽子

最新推荐文章于 2023-01-28 20:58:03 发布

阅读量1.6w

点赞数 26

分类专栏： # CSS

本文链接：https://blog.csdn.net/emmm520/article/details/107671631

版权

CSS 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

border-radius用来实现圆角边框。

一般这么用：

<html>
<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果为：

但是如果我把border-radius设为150px，就会变成圆形边框

<html>
<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            border-radius: 150px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果为：

为了方便，直接把border-radius设为50%也行。效果是一样的。

但是如果想画圆，则width和height必须要相等（这应该是基本常识吧）。

事实上，border-radius后可以接多个属性值，像上面的一个属性值则默认四角都为该属性值，若是四个属性值显然是与四角相对，这么个相对法呢？从左上角开始，顺时针一一对应。

举例：

<html>
<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background: rgb(0, 162, 255);
            border-radius: 50px 0px 20px 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果为：

我的天，注意各属性值之间不要用“,”啊，只需要空格就行了，不小心用了个逗号结果输出一个正方形，查了半天错。

划重点，如果是三个属性值就比较迷了，第一个值表示左上角，第二个值表示右上角和左下角（对角），第三个值表示右下角。嘿嘿嘿，没想到吧。这里就不举例了。

两个属性值倒也简单，第一个值表示左上角和右下角，第二个值表示右上角和左下角。没什么特别。亦不再多言。

另外，还有斜杠二组值：第一组值表示水平半径，第二组值表示垂直半径，每组值也可以同时设置1到4个值，规则与上面相同。

具体用法为：border-radius:60px/50px;

四个属性值采用如下方法：border-radius: 60px 60px 60px 60px/100px 100px 60px 60px;

这个简直是个法宝啊，我们可以用它来画各种不规则边框。不过说实话，本人脑洞有点小，设计的图案简直丑出天际。

举例画个鸡蛋吧：

<html>
<head>
    <style>
        div {
            width: 80px;
            height: 100px;
            border: 1px solid black;
            background: rgb(0, 162, 255);
            border-radius: 40px 40px 40px 40px/60px 60px 40px 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>