css怎么填充边框颜色,没有创建每个边框颜色的css设置上/下/左/右填充颜色

所以要避免添加每种颜色集的顶部/底部/左侧/右侧

最终代码如下

css

.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

top

left

right

结果

因此，如果我要添加新颜色，只需添加

.callout.success {

--callout-border-color: #5cb85c;

}

无需添加更多的上/下/左/右类

或任何更好的解决方案？