在前端开发中，我们经常会用到圆角效果，而实现圆角效果的主要方式就是使用 border-radius 属性。在 LESS 中，我们可以通过一些技巧来更加方便地使用这个属性，并实现更加复杂的圆角效果。
基本用法
首先，让我们来回顾一下 border-radius 属性的基本用法。这个属性可以接受一个或四个参数，分别代表四个角的圆角半径。例如：
border-radius: 5px; /* 所有角都是 5px 的圆角 */ border-radius: 5px 10px; /* 上左、上右和下右、下左两个角分别是 5px 和 10px 的圆角 */ border-radius: 5px 10px 15px; /* 上左、上右、下右和下左四个角分别是 5px、10px 和 15px 的圆角 */ border-radius: 5px 10px 15px 20px; /* 上左、上右、下右和下左四个角分别是 5px、10px、15px 和 20px 的圆角 */
LESS 中的变量
在 LESS 中，我们可以使用变量来保存常用的值，例如圆角半径。这样可以方便我们在多处使用相同的值时进行修改。例如：
@border-radius: 5px;
.box {
border-radius: @border-radius;
}这样，如果我们要修改圆角半径，只需要修改一处即可。
LESS 中的运算
LESS 中支持各种运算，包括加、减、乘和除。这些运算可以方便我们在计算圆角半径时进行适当的调整。例如：
-- -------------------- ---- ------- --------------- ---- --------------------- -------------- - -- ---- - -------------- --------------- - ---------- - -------------- --------------------- -
这样，我们就可以方便地使用相同的基础值，进行不同的计算，得到不同大小的圆角。
LESS 中的混合器
除了变量和运算外，LESS 还支持混合器（Mixin）。混合器可以方便地定义一段 CSS 代码，然后在需要的地方进行调用。例如，我们可以定义一个圆角混合器：
.border-radius(@radius: 5px) {
border-radius: @radius;
}这个混合器接受一个参数，代表圆角半径。如果没有传入参数，则默认为 5px。我们可以在需要的地方进行调用：
.box {
.border-radius(); /* 使用默认值 */
}
.box-large {
.border-radius(10px); /* 使用 10px 的圆角半径 */
}LESS 中的条件语句
LESS 中还支持条件语句，可以根据不同的条件，选择不同的代码块。例如，我们可以根据是否需要圆角效果，来选择是否应用圆角样式：
.box {
@has-border-radius: true;
.border-radius(@radius: 5px) when (@has-border-radius) {
border-radius: @radius;
}
}这样，如果 @has-border-radius 为 true，则会应用圆角样式；否则，不会应用圆角样式。
示例代码
下面是一个完整的示例代码，展示了如何结合上述技巧，实现不同的圆角效果：
-- -------------------- ---- -------
--------------- ----
----------------------- ---- -
-------------- --------
-
---- -
-----------------
-
---------- -
---------------------
-
---------------- -
---------------------
-
------------ -
------------------- -----
------------------------------ ---- -------------------- -
-------------- ----
-
-
--------- -
------------------- -----
------------------------------ ---- -------------------- -
-------------- -------
-
-这个代码定义了五个不同的类，分别实现了不同的圆角效果。其中：
.box类应用默认的圆角半径；.box-large类应用较大的圆角半径；.box-extra-large类应用更大的圆角半径；.box-rounded类实现了圆形效果；.box-pill类实现了胶囊形效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d94472a941bf71340da4c3
