border-radius理解-边框棱角变圆

最新推荐文章于 2024-07-10 16:05:14 发布

蓝色漩沐

最新推荐文章于 2024-07-10 16:05:14 发布

阅读量3.9k

点赞数 2

文章标签：其他

本文链接：https://blog.csdn.net/Helloxiaovv/article/details/104346692

版权

本文详细介绍了CSS中border-radius属性的使用，包括三种设置方法：单值、四个方向的值和部分值的省略。通过实例解析了px和%单位下圆角的显示效果，并强调了在设置圆形时考虑border和padding的影响。最后，提到了border-radius的完整结构形式，允许创建更复杂的椭圆形或圆形边角。

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

一、border-radius使用
　　border-radius的数值有三种表示方法：px、%、em，对于border-radius的值的设置，我们常用的有三种写法：

（1）仅设置一个值

第一种方法，应该是我们最常用的一种情况了，常用来给button加圆角边框，或者画一个圆形按钮，仅需设置一个数值，即可给元素的四个边角设置统一的圆角弧度，例如：

#test1 {
    border: 3px solid red;
    height: 100px;
    width: 200px;
    border-radius: 30px;
}

在这里插入图片描述

#test2 {
　  border: 3px solid red;
　 height: 100px;
　　width: 100px;
　　border-radius: 53px;
}

在这里插入图片描述

（2）设置四个方向的值

border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式，因此，border-radius : 30px;，其实等价于border-radius :