<分区>
我想使用正则表达式来定义一组关于边界半径的复杂 Angular 选项
我想要一种定义类 Angular 的方法*，而不需要在 html 或 css 中拥有每个组合
例子:
这是我现在的 CSS:
.corner-tl {
border-top-left-radius:8px;
}
.corner-tr {
border-top-right-radius:8px;
}
.corner-bl {
border-bottom-left-radius:8px;
}
.corner-br {
border-bottom-right-radius:8px;
}
但是我希望能够应用以上所有、部分或不应用，如下所示，只需使用以下代码即可完成一个只有左上角和右上角的框:
<div class="corner-tl corner-tr">
这些是显而易见的解决方案 - 但是我将对填充和边距、边框等许多东西应用相同的逻辑，因此类将变得很长。这样做的原因是实际值 (8px) 可以通过 php 操纵到我的 CMS 的每个和所有实例。我宁愿使用的是:
<div class="corner-tl-tr">
在 css 中有没有一种方法可以使用正则表达式来做到这一点，这样任何带有“Angular ”的东西和它后面的任何东西都可以组合起来，为单个类添加任意数量的 Angular 效果？
不知道如何表达我想要的是这样的:
.corner*-tl* {
border-top-left-radius:8px;
}
对于每个 Angular ，其中 * 是在“Angular ”之前或之后但仅在“Angular ”之后的任何内容。这样，对于许多可能的组合，我只需要 4 个类。
例子 我想在我的 html 中使用 corner-tl-tr-br 来创建一个半径在左上角、右上角和右下角的 div。我还希望能够使用 corner-tr-tl-br 来创建相同的内容，但无需为每个变体编写一个类。如果找不到解决方案，我将被迫使用内联样式，因为可能的组合很多。此外，我的数据库将存储这些值，这些值可以按任何顺序添加或不添加到整个站点的任何 div。最好分四行执行此操作，其中每行都可以合并为一行。这甚至可能是不可能的，但到目前为止的示例只向我展示了单个类，而不是组合类。
如果可以的话，我不想做很多样式，比如 - corner, corner-tl, corner-tr, corner-bl, corner-br, corner-tl-tr, corner-tr -tl, corner-tl-bl, corner-bl-tl, corner-tl-br, corner-br-tl 等等...理论上不需要单独的 Angular ，因为它没有设置半径，所以它在 html 中与不应用该类相同，但可能需要实现其他类，但其余的在我的系统中是可能的。我希望能够在单个类中应用任何组合，该类在 4 个选项的 css 中有一个表达式。