border-radius的一些知识

最新推荐文章于 2025-06-16 20:55:09 发布

肖肖肖丽珠

最新推荐文章于 2025-06-16 20:55:09 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端小知识

本文链接：https://blog.youkuaiyun.com/qq_33769914/article/details/78498047

208 篇文章

订阅专栏

本文探讨了CSS中border-radius属性的使用技巧，包括如何通过设置不同数值获得圆形效果，以及解决Chrome浏览器中opacity非1时导致的border-radius渲染问题。

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

border-radius设置成50% 就能得到一个圆，但是如果你的border-radius足够大，也是可以得到一个圆的。

border-radius单值实际上是一种简写。他其实和padding一样，上右下左。四个值。设置四个边的圆角。

你也可以只设置某一边的border-bottom-left-radius:10px.

左边好像被切了一样的。

出现这种渲染问题，需要满足下面两个条件：

解决办法：

第一种：元素尺寸和位置都在都是整数像素

然而很多时候这种方法并不切实际，尤其对于复杂布局，例如我们使用calc计算对元素宽度定位时候，或者line-height使用不容易计算的小数时候，或者基于rem的布局等等，想要强制元素尺寸和位置都是整数并不太容易。

第二种：不使用opacity实现半透明

既然我们的问题出现与opacity不是1有关，那我们就不使用opacity实现半透明，采用其他的方法代替。

如果我们想使一个边框变成半透明，除了opacity外，我们还可以使用RGBA或者HSLA颜色。

.ele {
    display: inline-block;
    width: 40px; height: 40px;
    border: 1px solid hsla(0,0%,100%,.6);
    border-radius: 50%;
   }

上面的60%透明度白色边框也可以使用RGBA颜色表示：rgba(255,255,255,.6)。效果是一模一样的，也能让边框完美显示。

那为什么上面我用的是HSLA颜色表示而不是RGBA颜色表示呢？

因为使用HSLA表示白色要比RGBA表示白色可以少2个字母。

这就是我的颜色表示的一个小秘密：白色半透明使用HSLA颜色表示，黑色半透明使用RGBA颜色表示