CSS边框缩写

Question

我想修剪CSS边框语句。我知道有可能，但我总是发现互联网上的那个，例如：

Answer 1

对于例如填充，您可以编写：padding: 5px 10px来设置五个像素的顶部和底部填充以及一个10像素的左右填充。

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

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

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

或者使用border-width，它允许您为宽度设置多个值，方法与设置填充相同。

Answer 2

你最好通过这样的课程来做到这一点：

＆＃13;

＆＃13;

.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; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;