Question

我想知道是否可以通过以下方式为css增加一些灵活性：

<div class='round5'></div>

其中.round是具有圆角的类，'5'确定半径的数量。可能吗？我已经看到了一些地方，但我不知道实施的方式。

Answer 1

对于任何在2018年陷入困境的人，whilst not fully supported CSS变量现在使您能够将变量直接传递到类中。

<div class="round" style="--radius: 100%;"></div>
<style>
  .round {
    display: block;
    height: 40px;
    width: 40px;
    border: 1px solid #BADA55;
    border-radius: var(--radius);
  }
</style>

您还可以定义根变量并将其传递给

<div class="round" style="--radius: var(--rad-50);"></div>
<style>
  :root {
    --rad-0: 0%;
    --rad-50: 50%;
    --rad-100: 100%;
  }
  .round {
    display: block;
    height: 40px;
    width: 40px;
    border: 1px solid #BADA55;
    border-radius: var(--radius);
  }
</style>

这也适用于元素。如果在一个元素中设置--radius不会影响另一个元素。爵士乐吧！

Answer 2

您无法将边界半径与其值分开，因为它只是一个属性。没有任何方法可以告诉元素“一般”有圆角，而没有指定对它们进行舍入的程度。

但是，您可以使用多个类和不同属性执行类似的操作：

HTML：

<div class="rounded blue"></div>
<div class="rounded green"></div>

CSS：

.rounded {
    border-radius: 5px;
}
.blue {
    background: blue;
}
.green {
    background: green;
}

.rounded类添加边框半径，.blue和.green类添加背景颜色。

（我喜欢命名和排序类，以便他们按逻辑方式阅读，如<div class="large box"></div>等。）

Answer 3

这是我提出的答案，需要少量的jQuery，以及对Regex的一点知识。

    $(function() {
      var number = $("div").attr("class").match(/\d+$/);
      $("div").css({
        "width": "100px",
        "height": "100px",
        "background-color": "green",
        "border-radius": number + "px"
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='round54'>hello</div>

.match()函数使用Regex。正则表达式用于检测字符串的一部分。 \d检测到任何数字。 +与之前的选择器匹配1次或更多次。换句话说，该数字可以是多位数。而$意味着它必须在最后。

然后jQuery稍后在border-radius属性中使用它。你所要做的就是追加px，你就可以了。

Fiddle

Answer 4

您可以在元素上使用多重分类。例如：

HTML：

<div class="round">Box without border radius</div>
<div class="round rounded-5">Box with 5px border radius</div>
<div class="round rounded-10">Box with 10px border radius</div>

CSS：

.round {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
}

.round.rounded-5 {
    border-radius: 5px;
}

.round.rounded-10 {
    border-radius: 10px;
}

Answer 5

你可以做类似的事情但不完全像你所说的那样。

CSS

.radius{
    border-radius: 10px;
    border: 1px solid red;
}

.r5{
    border-radius:5px;
}

HTML

<div class="radius">Hello World</div>
<br/>
<div class="radius r5">Hello World</div>

<强> Working Example

在上面的例子中，红色边框将被保留，但border-radius将会改变。

请注意，您不会使用数字启动类名，因此r5而不是5

Answer 6

你可以这样做。但您必须在html文档中创建css（未链接，但在<style>标记之间）。你可以用php或javascript来制作一个循环。例如试试这个：

<style>
    <?php
    $round = 5;
    for ($round = 50; $round <= 150; $round+=25){

   echo "#round$round{
       height: 300px;
       width: 300px;
       background: #f00;

border-radius : ".$round."px;
    margin: 2px;
}
";

    }
    ?>
</style>
<?php 
for ($round=50;$round<=150; $round+=25){

    echo "<div id='round$round'>

</div>
            ";

}

?>

希望这有帮助！：d

Answer 7

也许你想要的就像这样

CSS

.round {
  border-radius: 4px; /*it's default when you juse using .round*/
}
.round.five {
  border-radius: 5px;
}
.round.ten {
  border-radius: 10px;
}

HTML

<div class="round five">something</div>

Answer 8

你可以按照自己的意思去做，但你必须保留关键字＆＃34; round＆＃34;仅用于此目的。如果你看下面的内容。

div[class*="round"] {
    background-color: green;
    color: white;
    padding: 10px;
}

然后使用...

定位它的特定变体

div[class="round5"] {
    border-radius: 5px;
}

第一个代码块选择包含单词round的所有类名，这既可以是好事也可以是坏事。

如何将参数传递给css类

8 个答案: