Html 不创建每个边框颜色的css设置为顶部/底部/左侧/右侧以填充颜色

css

.callout {
    background-color: inherit;
    border: 1px solid #eee;
}
.callout.top {
    border-top-width: .25rem;
}
.callout.bottom {
    border-bottom-width: .25rem;
}
.callout.left {
    border-left-width: .25rem;
}
.callout.right {
    border-right-width: .25rem;
}
.primary {
    border-color: #428bca;
}

.callout {
    background-color: inherit;
    border: 1px solid #eee;
}
.callout.top {
    border-top-width: .27rem;
    border-top-color: var(--callout-border-color, inherit);
}
.callout.bottom {
    border-bottom-width: .27rem;
    border-bottom-color: var(--callout-border-color, inherit);
}
.callout.left {
    border-left-width: .27rem;
    border-left-color: var(--callout-border-color, inherit);
}
.callout.right {
    border-right-width: .27rem;
    border-right-color: var(--callout-border-color, inherit);
}
.callout.primary {
    --callout-border-color: #428bca;
}
.callout.warning {
    --callout-border-color: #f0ad4e;
}
.callout.danger {
    --callout-border-color: #d9534f;
}

html

<div class="callout left primary">
    whole border is primary color
</div>

<div class="callout top primary">top</div>

<div class="callout left warning">left</div>

<div class="callout right danger">right</div>

整个边框是原色

如何设置左边框仅为原色，其他为#eee颜色

编辑：添加了一个图像，我希望看起来像这样

以防需要使用覆盖边框颜色

<div class="callout top primary border-warning">
    same problem as above
</div>

与上述问题相同

通过此操作，每个边框位置（

左

，

右

，

顶部

，

底部

）都具有特定的

颜色

，

宽度

，

样式

css属性

.callout{
背景色：继承；
边框：1px实心#eee；
}
.callout.top{
边框顶部宽度：.25rem；
边框顶部颜色：#428bca；
}
.callout.bottom{
边框底部宽度：.25rem；
边框底色：#428bca；
}
.callout.左{
左边框宽度：.25rem；
左边框颜色：#428bca；
}
.callout.right{
右边框宽度：.25rem；
右边框颜色：#428bca；
}
.小学{
边框颜色：#428bca；
}

整个边框是原色


与上述问题相同

好的，我用谷歌搜索过，可以在css中使用变量

因此，为了避免在顶部/底部/左侧/右侧添加每个颜色集

最后的代码就是这样

css

.callout {
    background-color: inherit;
    border: 1px solid #eee;
}
.callout.top {
    border-top-width: .25rem;
}
.callout.bottom {
    border-bottom-width: .25rem;
}
.callout.left {
    border-left-width: .25rem;
}
.callout.right {
    border-right-width: .25rem;
}
.primary {
    border-color: #428bca;
}

.callout {
    background-color: inherit;
    border: 1px solid #eee;
}
.callout.top {
    border-top-width: .27rem;
    border-top-color: var(--callout-border-color, inherit);
}
.callout.bottom {
    border-bottom-width: .27rem;
    border-bottom-color: var(--callout-border-color, inherit);
}
.callout.left {
    border-left-width: .27rem;
    border-left-color: var(--callout-border-color, inherit);
}
.callout.right {
    border-right-width: .27rem;
    border-right-color: var(--callout-border-color, inherit);
}
.callout.primary {
    --callout-border-color: #428bca;
}
.callout.warning {
    --callout-border-color: #f0ad4e;
}
.callout.danger {
    --callout-border-color: #d9534f;
}

html

<div class="callout left primary">
    whole border is primary color
</div>

<div class="callout top primary">top</div>

<div class="callout left warning">left</div>

<div class="callout right danger">right</div>

无需再添加任何上/下/左/右类

---

或者有更好的解决方案吗？

你用谷歌搜索过吗？我花了2秒钟@noa dev抱歉，我不明白，这有点像动态边框颜色，因为.primary类不知道要替换哪一侧的颜色，这取决于top/bottom/left/right这不能解决问题，我只想要top/bottom/left/right和primary，其他三个保持边框颜色#eee，所以硬核的“边框顶色：#428bca；”上/下/左/右不好，因为上/下/左/右是基于.原色的