CSS圆角 border-radius椭圆 / 正斜杠是什么？

最新推荐文章于 2025-01-11 20:03:00 发布

放弃只需一秒钟

最新推荐文章于 2025-01-11 20:03:00 发布

阅读量1.4k

点赞数 8

文章标签： css html5 html

本文链接：https://blog.csdn.net/zhixu_3y/article/details/120457116

版权

本文详细解析了CSS中border-radius属性的用法，特别是如何通过该属性创建不同形状的圆角和椭圆效果。文章重点介绍了水平半径与垂直半径的概念及其在border-radius属性中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css中各元素（如设置了height,width的块级元素；input输入框，又或者是图片img等等）所呈现出来的都是方体，方体即为四个角的图形。但可以通过 CSS border-radius 属性来实现任何元素的“圆角”样式。

还有这种椭圆。

如上述图1（左）来分析

代码如下

#picture1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

上述代码为border-radius: 50px / 15px; 可以看到对于这种椭圆，在代码中使用的是50px 正斜杠 15px来实现的。

那么这个 / 代表是什么，是什么作用呢？

其实首先平时我们写的border-radius : 50px，完整的写法应该是：border-radius : 50px 50px 50px 50px / 50px 50px 50px 50px;

“/”前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径，什么是水平半径和垂直半径呢，见下图

所以图1的代码border-radius: 50px / 15px;的完整写法为border-radius: 50px 50px 50px 50px / 15px 15px 15px 15px;

（如下图）可以理解为每一个角都是50px（水平半径）/15px（垂直半径），两种不同的值（弧度）来实现的不规则椭圆。自然四个角就是50px 50px 50px 50px / 15px 15px 15px 15px

不论是椭圆还是圆形，它所根据的是水平半径和垂直半径的值，根据这个给元素设置圆角的弧度。

所以一定要记住border-radius的完整写法，才能深刻的从根本上知道这“狡猾”的代码是怎么计算生成最终的图形样式的。