52

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

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

其中.round是一个带有圆角的类，“5”决定了半径的大小。是否可以？我见过一些地方，但我不知道实施是如何进行的。

4

8 回答 8

99

For anyone stumbling across this in 2018, whilst not fully supported CSS variables now give you the ability to pass a variable directly into your class. 

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

You can also define root variables and pass them in as well

<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>

This is also scoped to the element as well. If you set the --radius in one element is wont effect another element. Pretty jazzy right!

于 2018-07-22T02:35:41.570 回答
14

您不能定义与其值分开的边界半径，因为它是一个属性。没有办法告诉元素“一般”具有圆角，而无需指定将它们舍入多少。

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

HTML：

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

CSS：

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

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

（我喜欢对类进行命名和排序，以便它们在逻辑上阅读，例如<div class="large box"></div>等）。

于 2013-07-27T03:11:04.520 回答
12

这是我想出的一个答案，它需要少量的 jQuery 和少量的正则表达式知识。

    $(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()函数使用正则表达式。正则表达式用于检测部分字符串。\d检测任何数字。匹配前+一个选择器 1 次或多次。换言之，该号码可以是多位号码。以及$它必须在最后的手段。

因此，jQueryborder-radius稍后会在属性中使用它。您所要做的就是 append px，一切顺利。

小提琴

于 2013-07-27T04:04:25.433 回答
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>

工作示例

在上面的示例中，将保留红色边框，但边框半径将发生变化。

请注意，您不要以数字开头类名，因此r5而不是5

于 2013-07-27T03:14:33.833 回答
5

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

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;
}
于 2013-07-27T03:17:44.800 回答
4

你可以这样做。但是您必须在 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

于 2013-07-27T03:35:28.090 回答
4

也许你想要的是这样的

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>
于 2018-02-19T09:28:48.910 回答
1

您可以按您说的做，但您必须为此目的保留关键字“round”。如果你看下面。

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

然后使用...定位它的特定变体

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

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

于 2014-08-04T20:47:15.990 回答