经过一番挖掘后我发现
this是我对桌子圆角需要的最好回应.
这引出了我以下的CSS片段:
.greytable tr:first-child th:first-child { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; } .greytable tr:first-child th:last-child { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; } .greytable tr:last-child td:first-child { -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; } .greytable tr:last-child td:last-child { -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; }
现在我想知道如何用LESS简化所有这些.我尝试了以下LESS代码:
.border-radius (@v,@h,@radius: 5px) { -moz-border-radius-@v@h: @radius; -webkit-border-@v-@h: @radius; border-@v-@h: @radius; }
.greytable tr:first-child th:first-child { .border-radius('top','left') }
但它不起作用(LESS片段的第二行出错).
提前致谢!
解决方法
您可能需要使用字符串插值语法,请尝试以下方法:
.border-radius (@v,@radius: 5px) { -moz-border-radius-@{v}@{h}: @radius; -webkit-border-@{v}-@{h}-radius: @radius; border-@{v}-@{h}-radius: @radius; }
我还要补充说,webkit和mozilla在很大程度上符合标准的border-radius属性,并且供应商前缀已经过时了.
编辑:似乎字符串插值不适用于此任务(上面的代码将无法编译),所以这是一个实际上更容易使用的解决方法mixin:
.rounded-table(@radius) { tr:first-child th:first-child { -moz-border-radius-topleft: @radius; -webkit-border-top-left-radius: @radius; border-top-left-radius: @radius; } tr:first-child th:last-child { -moz-border-radius-topright: @radius; -webkit-border-top-right-radius: @radius; border-top-right-radius: @radius; } tr:last-child td:first-child { -moz-border-radius-bottomleft: @radius; -webkit-border-bottom-left-radius: @radius; border-bottom-left-radius: @radius; } tr:last-child td:last-child { -moz-border-radius-bottomright: @radius; -webkit-border-bottom-right-radius: @radius; border-bottom-right-radius: @radius; } }
用法:
.greytable { .rounded-table(10px) }
输出:
.greytable tr:first-child th:first-child { -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; border-top-left-radius: 10px; } .greytable tr:first-child th:last-child { -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px; } .greytable tr:last-child td:first-child { -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px; } .greytable tr:last-child td:last-child { -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。