CSS 边框缩写

Question

我想 trim 我的 CSS 边框声明。我知道有可能，但我总是在互联网上找到那个，例如:

Answer 1

例如内边距，您可以这样写：padding: 5px 10px 设置 5 像素的上下内边距和 10 像素的左右内边距。

但对于边界来说，情况并非如此。您必须为所有边设置相同的值，或者一次为一侧设置属性。

但是，您可以使用 border-left-width 仅设置宽度，这样您就可以设置默认边框并仅覆盖特定边的宽度：

border: 5px solid #666;
border-left-width: 10px;
border-right-width: 10px;

或使用 border-width，这样您就可以单独为宽度设置多个值，就像设置填充一样。

Answer 2

你最好通过类这样做：

.box{
    width: 100px;
    height: 100px;
    margin: 20px;
    float: left;
}    
.border{
    border-width: 5px;
    border-style: solid;
    border-color: #98bf21;
}
.b1{ border-width: 5px 10px 15px 2px; }
.b2{ border-width: 5px 7px 10px 7px; }
.b3{ border-width: 15px 2px 10px 5px; }

<div class="box border b1"></div>
<div class="box border b2"></div>
<div class="box border b3"></div>

CSS 边框缩写

CSS border abbreviation

css

border

abbreviation