Question

是否有更有效的方式来声明和使用这些（非常相似/重复）的CSS类：

div.rounded20
{
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
}

div.rounded15
{
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
}

或许可以说：

div.rounded(@Y)
{
  -webkit-border-radius:@Ypx;
  -moz-border-radius:@Ypx;
}

实际的课程用法为

<div class="rounded(15)" ...>

欢迎任何建议，包括使用jquery或其他造型方法......

Answer 1

你应该看看sass / compass解决方案，这些解决方案旨在实现这一目标。它们还具有算术运算和对变量和颜色的支持。

Answer 2

我不相信直接css有办法做到这一点，因为它是静态的。但是，肯定有一种方法可以用jquery来实现。你可以设置一个命名函数，比如SetRoundedCorners（element，radius），并做这样的事情：

function SetRoundedCorners (element, radius) {
    $(element).css("-webkit-border-radius:" + radius +";
 -moz-border-radius:" + radius +";");
}

$("#myelement").click(function(){
    SetRoundedCorners(this, someRadius);
});

尚未对其进行测试，但这些内容应该有效。祝你好运！

编辑：还有一个jquery函数可以用来绕过角落：

$(document).ready(function(){
 $("#box1").corner();
});

可在此处找到：http://www.malsup.com/jquery/corner/

Answer 3

也许是这样的......

HTML：

<div class="rounded 15"></div>
<div class="rounded 45"></div>

jQuery的：

$("div.rounded").each
(
    function()
    {
        // Calculate the radius as the number at the end of the class name.
        var radius = $(this).attr("class").replace(/^.*?(\d+)$/, "$1");

        // Set both CSS properties to the calculated radius.
        $(this).css({"-webkit-border-radius": radius + "px", "-moz-border-radius": radius + "px"});
    }
);

Answer 4

我使用CSS编译器...基本上为您生成CSS文件。我使用的是专有的，但它与 this one (PHP)

非常相似

通过使用编译器，您可以定义变量，循环，加/减/乘等，以及（如果您是硬核）通过操纵“已知”颜色的RGB来构建动态颜色托盘。如果你想要的颜色要轻10％，暗50％，或者相反。

CSS类名参数？

4 个答案: