Граница CSS не работает

ProgramBox

Граница CSS не работает

Post author:admin
Запись опубликована:30 апреля, 2023
Post category:Вопросы по программированию

#css #border

#css #граница

Вопрос:

Я пытался получить границу по обе стороны от моего белого контейнера. Это просто не отображается. Я попытался поместить ее в три разных элемента на всякий случай! (смотрите ниже). Есть идеи, как заставить это работать?

 #wrapper {
    width:1000px;
    background:#F4F4F4;
    padding-top:5px;
    border: 3px #CDCDCD;
    overflow: auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto;  
}

#casing {
    padding:0px 0px 0px 0px;
    background:#Fff;
    border: 0 1px 0 1px solid #000;
}   

#cover {
    border: 0 1px 0 1px solid #000;
}

Ответ №1:

Сделайте это:

 border: solid #000;
border-width: 0 1px;

Живая демонстрация: http://jsfiddle.net/aFzKy /

1. Это круто. Но это не работает… Теперь я в замешательстве! 😉 >#box { width: 100px; height: 100px; border: сплошной красный; border-width:0 5px 0 5px; }

2. @Tara Я не понимаю. Разве демонстрация не показывает, что это работает?

3. Этот код ‘border-width:0 5px 0 5px;’ ничем не отличается от этого кода ‘border-width:0 5px;’ но я ожидал, что так и будет…

4. @Tara border-width:0 1px является сокращением для border-width:0 1px 0 1px — они эквивалентны. Однако внутри border свойства вы не можете определить несколько значений длины — border:0 1px solid #000 недопустимо. Вот почему (в моем решении) Сначала я использую border для определения стиля и цвета границы, а затем использую border-width для определения различных длин границ. По сравнению с принятым в настоящее время решением, мое решение лучше, потому что оно не является избыточным. Читайте здесь .

5. Спасибо за объяснение @sime. Ваш метод более оптимизирован, поэтому я приму его как лучший ответ.

Ответ №2:

Я думаю, вы только что придумали сокращенный синтаксис для border: этого свойства =)

Попробуйте просто:

 border-right: 1px solid #000;
border-left: 1px solid #000;

1. Я удивлен, что синтаксис OP не работает — похоже, что так и должно быть, учитывая, как обычно работают свойства CSS, но это не так. Приведенный ответ является хорошей альтернативой, так что 1.

2. @Spudley Действительно, это напоминает синтаксис box-shadow.

3. Смехотворно 🙂 Я понятия не имел, я просто предположил, что это будет работать так же, как заполнение и поля.

4. @Spudly Да, то же самое, тень окна — это именно это (имеет дополнительный параметр цвета!): 0px 0px 5px 5px #000000

5. Спасибо, проблема для меня заключалась в том, что мне нужно было установить border-style на solid.

Ответ №3:

Используйте эту строку кода в вашем css

 border: 1px solid #000 !important;

или, если вы хотите, чтобы граница была только в левой и правой части контейнера, тогда используйте:

 border-right: 1px solid #000 !important;
border-left: 1px solid #000 !important;

Ответ №4:

Вы пробовали использовать Firebug для проверки отображаемого HTML-кода и точного определения того, какой css применяется к различным элементам? Это должно выявлять ошибки css, подобные упомянутым выше, и вы можете видеть, какие стили наследуются и откуда — это также неоценимо при любой отладке css.

Ответ №5:

AFAIK, такого сокращения для границы не существует. Вы должны определить каждую границу отдельно:

 border: 0 solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;

Ответ №6:

Высота не определена на 100%, попробуйте поместить display: block; or display: inline-block;

Ответ №7:

Вы забыли добавить стиль границы, сделайте это

 border-style: solid

Или вы можете написать

 border: 3px #CDCDCD solid

Ответ №8:

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

 border-style: solid;
border-width: 2px;
border:blueviolet;

Ответ №9:

Проверьте, не используется ли где-нибудь в коде этот стиль:

 border-top: none;

Или любой другой вариант border-{сторона}: отсутствует.

Ответ №10:

Вы не можете сократить концепцию в границе. Просто используйте:- borderWidth: ‘1px’, border: ‘solid #BDBDBD’ // Это цвет, который вы можете выбрать в соответствии с вашими потребностями.