border-radius 是 CSS3 中一个非常实用的属性，可以让我们轻松实现圆角效果。但是在不同浏览器上的兼容性却是一个问题。为了解决这个问题，我们可以使用 LESS 来实现兼容性调整。
如何使用 LESS
在介绍如何使用 LESS 实现 border-radius 的兼容性调整之前，先简单介绍一下 LESS。LESS 是一种 CSS 预处理器，可以让我们使用变量、函数、混合等高级功能来编写 CSS。LESS 编写的代码需要通过编译生成 CSS，可以使用 LESS 编译器来完成。
在使用 LESS 之前，需要先了解其基本语法：
- 变量：使用 @ 符号定义，例如：@color: #333;
- 混合：使用 .class_name 定义，例如：.border-radius() {...}
- 继承：使用 &:hover 继承父级样式，例如：a {... &:hover {...}}
实现 border-radius 的兼容性调整
在实现 border-radius 的兼容性调整之前，首先需要了解不同浏览器对 border-radius 的支持情况。一般来说，现代浏览器（包括 Chrome、Firefox、Safari 等）都可以支持 border-radius 属性，但是 IE 浏览器需要使用 -webkit-border-radius、-moz-border-radius 等前缀才能支持。
在 LESS 中实现 border-radius 的兼容性调整，可以使用混合和继承的方式。以下是示例代码：
----------------------- ---- - -------------- -------- ---------------------- -------- ------------------- -------- -
使用上述代码，可以很方便地实现 border-radius 的兼容性调整。调用方法为 .border-radius()，并可以传入一个参数 @radius，用于设置圆角半径。如果不传入参数，则默认为 2px。
使用示例：
------- - --------------- - ---- - --------------------- -
通过上述代码，我们可以轻松地实现按钮和盒子的圆角效果，并且不用担心浏览器兼容性的问题。
结论
通过使用 LESS，我们可以更方便地实现 border-radius 的兼容性调整，而不用担心不同浏览器的兼容性问题。同时，LESS 还具有其他很多优秀的功能，可以大大提高我们的 CSS 编写效率。因此，掌握 LESS 是每个前端开发者都应该学习的一项技能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670b56e7d91dce0dc8899637