Question

我想使用正则表达式来定义关于边界半径

的一组复杂的角选项

我想要一种方法来定义类角*而无需在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中是否有一种方法可以使用正则表达式执行此操作，以便任何带有“corner”的内容以及其后的任何内容都可以组合以向单个类添加任意数量的角落效果？

不知道怎么做表达我想要的是这个：

 .corner*-tl* {
    border-top-left-radius:8px;
}

对于每个角落，其中*是之前或之后的任何内容，但仅在'角落'之后。这样，对于许多可能的组合，我只需要4个类。

实施例我想在我的html中使用corner-tl-tr-br来创建一个半径为左上，右上和右下的div。我也希望能够使用corner-tr-tl-br来创建相同的内容，但不为每个变体编写一个类。如果我找不到解决方案，我将被迫使用内联样式，因为可能的组合很多。此外，我的数据库将存储这些值，这些值可以按整个站点上的任何div的任何顺序添加或不添加。在四行中执行此操作会很好，每行可以合并为一行。它甚至可能是不可能的，但到目前为止的例子只显示单个类，而不是组合类。

如果我可以提供帮助，我不想制作很多款式，例如 - 角落，角落-Tl，角落-Tr，角落-b1，角落-Br，角落-tl-tr，角落-tr -tl，corner-tl-bl，corner-bl-tl，corner-tl-br，corner-br-tl等等......理论上不需要角落，因为它没有半径设置，所以它在html中是相同的，因为没有应用类，但可能需要实现其他类，但其余部分在我的系统中是可能的。我希望能够在一个具有4个选项的css表达式的类中应用任何组合。

Answer 1

以

开头

[class^="corner-"] {

}

<强>包含

[class*="corner-"] {

}

结束

[class$="corner-"] {

}

是否可以在CSS中使用通配符来创建正则表达式来创建更少的代码？

1 个答案: