对于任何在2018年偶然发现这一点的人来说，虽然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，它不会影响另一个元素。非常有趣的权利！

你不能把边界半径和它的值分开定义，因为它们都是一个属性，没有办法告诉一个元素"一般"有圆角，而不指定圆角的大小。
但是，您可以对多个类和不同的属性执行类似的操作：
超文本：

<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>等）。

下面是我得出的一个答案，它需要少量的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。Regex用于检测字符串的组成部分。\d检测任何数字。+与前一个选择器匹配一次或多次。换句话说，数字可以是多位数。$表示它必须位于末尾。
jQuery稍后会在border-radius属性中使用它，您只需追加px即可。
Fiddle

你可以做一些类似的事情，但不完全是你所说的方式。
中央支助系统

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

.r5{
    border-radius:5px;
}

超文本标记语言

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

**一个

在上例中，红色边框将保留，但边框半径将更改。
注意，类名不能以数字开头，因此使用r5而不是5

您可以对元素使用多类。例如：
超文本：

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

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

也许你想要的是这样
中央支助系统

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

超文本标记语言

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

你可以做你所说的，但你必须保留关键字“轮”只为这个目的。

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

然后瞄准它的特定变种使用...

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

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

通过以下@stwilz的解决方案，并根据CSS var（）函数使用https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties。我能够使用它作为

.round{
    border-radius: var(--radius, 10px); 
    /* 10px as default value */
}

那就可以这样用了

<div class="round">Hello</div>
<div class="round" style="--radius: 20px">Hello</div>

全局值可以设置为，而不是默认值

:root{
    --radius: 30px;
}