Упрощать CSS

У меня есть край, сделанный таким (пример Fiddle):

.menu--margen {
    background: #f4f4f4;
    border-right: 1px solid #bbbbbb;
    border-left: 1px solid #bbbbbb;
    border-top: 1px solid #bbbbbb;
    border-bottom: none;
    margin: 3px auto;
    position: relative;
}

.menu--margen:before {
    padding: 20px;
    border-right: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    border-top: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Есть какой-то способ упрощать css border? Я попытался:

border: 1px 1px 0px 1px solid #f0f0f0;

Но оно, кажется, не функционирует.

4
задан 11.04.2016, 23:07
1 ответ

Эти линии:

border-right: 1px solid #bbbbbb;
border-left: 1px solid #bbbbbb;
border-top: 1px solid #bbbbbb;
border-bottom: none;

Ты можешь упрощать это в этих двух линиях:

border: 1px solid #bbb;
border-bottom: none;

Где первая определяет стиль четырех краев и вторая только дезактивирует нижний border. Кроме того необязательно так как #bbbbbb у него есть те же 6 шестнадцатеричных цифр ты можешь упрощать это как #bbb

Равного способа ты можешь делать с теми, которые находятся в другом стиле

border-right: 1px solid #f0f0f0;
border-left: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
border-top: none;

Ты можешь менять это в:

border: 1px solid #f0f0f0;
border-top: none;
8
ответ дан 24.11.2019, 14:36