Объединение границ с верхним, пограничным, нижним и нижним границами в CSS

Ответ 1

Нет, вы не можете установить их все в одном выражении.
В общем случае вам нужно как минимум три свойства:

border-color: red green white blue;
border-style: solid dashed dotted solid;
border-width: 1px 2px 3px 4px;

Однако это было бы довольно грязно. Это было бы более читаемым и поддерживаемым с четырьмя:

border-top:    1px solid  #ff0;
border-right:  2px dashed #f0F;
border-bottom: 3px dotted #f00;
border-left:   5px solid  #09f;

Ответ 2

Ваш случай является экстремальным, но вот решение для других, которое подходит для более распространенного сценария, требующего стиля менее четырех границ точно так же.

border: 1px dashed red; border-width: 1px 1px 0 1px;

что немного короче и, возможно, легче читать, чем

border-top: 1px dashed red;  border-right: 1px dashed red; border-left: 1px dashed red;

или

border-color: red; border-style: dashed; border-width: 1px 1px 0 1px;

Ответ 3

Нет, вы не можете установить их как одиночные например, если у вас есть   DIV {   border-top: 2px сплошной красный;   border-right: 2px сплошной красный;   border-bottom: 2px сплошной красный;   border-left: 2px сплошной красный;   } те же свойства для всех четырех, тогда вы можете установить их в одной строке

div{border:2px solid red;}

Ответ 4

Я могу относиться к проблеме, там должно быть сокращение, как...

border: 1px solid red top bottom left;

Конечно, это не работает! Ответ коби дал мне идею. Допустим, вы хотите сделать сверху, снизу и слева, но не справа. Вместо того, чтобы делать border-top: border-left: border-bottom: (три оператора), вы можете сделать два, как это, ноль отменяет правую сторону.

border: 1px dashed yellow;
border-width:1px 0 1px 1px;

Два утверждения вместо трех, небольшое улучшение: -D

Ответ 5

Или, если все границы имеют одинаковый стиль, просто:

border:10px;