CSS3如何实现DIV圆角边框

最新推荐文章于 2024-09-25 09:11:55 发布

啦啦啦allalal

最新推荐文章于 2024-09-25 09:11:55 发布

阅读量1.1w

点赞数 6

文章标签： css3

本文链接：https://blog.csdn.net/weixin_46388225/article/details/104462759

版权

CSS3如何实现圆角边框

在进行页面布局时，DIV边框默认是矩形边框，想让边框为圆角时，可以用CSS3的border-radius这一属性来实现。
例如：想让div盒子边框四个角都为半径为10px的圆角时具体代码如下：
在这里插入图片描述

效果图：
在这里插入图片描述

下面对border-radius具体细节进行介绍：
语法：border-radius: 1-4 length|% / 1-4 length|%;
注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
在这里插入图片描述

定义和用法

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
提示：该属性允许您为元素添加圆角边框！
在这里插入图片描述
border-radius的数值有三种表示方法：px、%、em，对于border-radius的值的设置，我们常用的有四种写法：
（1）当border-radius只有一个属性值时，表示盒子的四个角都是半径为该值的圆角。
例如：border-radius:5px;表示该盒子四个角都为半径为5px的圆角。
在这里插入图片描述

当border-radius属性值为50%时：
当盒子宽高相同时，此时盒子为圆形；
当盒子宽高不同时，此时盒子为椭圆形。
（2）当border-radius属性值为两个时，第一个值表示左上角和右下角半径为该值，第二个值表示右上角和左下角半径为该值。
例如：border-radius:10px 20px;
第一个值表示左上角和右下角半径为10px，第二个值表示右上角和左下角半径为20px的圆角。
（3）border-radius属性值为4个值时，这四个值按顺序分别表示的角为左上右上右下左下。
例如：border-radius:10px 20px 30px 40px；这四个值按顺序分别表示的角为左上角为半径10px的圆角右上角为半径20px的圆角右下角为半径为30px的圆角左下角为半径40px的圆角。
（4）可以单独对一个角设置为圆角：
左下角：border-bottom-left-radius:10px;
右下角：border-bottom-right-radius:10px;
左上角：border-top-left-radius:10px;
右上角：border-top-right-radius:10px;

注意事项

在设置对象为圆形的时候，如果使用了border、padding等情况时，对象的实际显示宽高已经不再是设置的width和height的数值，如果border-radius设置的值仍为原本的width和height的一半，可能达不到预期的真正的圆形的效果。
例如：
Div样式如下时：
在这里插入图片描述