Горизонтальная линия Не получает никакого стиля границы

#html #css

Вопрос:

Я пытался использовать border-style: dotted; , но горизонтальная линия, которая должна была быть пунктирной, не становится пунктирной. попробовал погуглить .. не помогло

введите описание изображения здесь

1. Пожалуйста, не добавляйте скриншоты своего кода, а вместо этого покажите нам реальный код.

2. Что я вижу, так это то, что вы не добавили border-width и border-color в свой код. Обычно вы можете установить то же самое с border: 2px dotted red помощью стенографии.

3. @Behemoth по фактическому коду означает ли это, что доказательство (веб-сайт) не требуется?

4. Нет, не волнуйтесь, но это намного удобнее, если люди смогут взглянуть на код в текстовой форме — > позволяет легче копировать, вставлять и играть с кодом.

5. @Behemoth О, мне жаль, что я здесь особенно новичок, поэтому я забыл . Я буду иметь это в виду в следующий раз

Ответ №1:

Хорошо, позвольте мне прояснить вам одну вещь, это не то, как обычно создаются горизонтальные линии, чтобы сделать горизонтальную линию, которую вы хотите сделать что-то подобное с вашим <hr> ,

 hr {
border: none;                      /** <- Note this line */
border-top: 1px dotted purple;       /** <- And then this line */
color: purple;
background-color: purple;
height: 1px;
width: 100%;                       /** You can set it to any length as per your need. */            
}

Ответ №2:

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

 hr {
  border: 1px dotted red;
}

это то же самое, что

 hr {
  border-width: 1px;
  border-style: dotted;
  border-color: red;
}

 hr {
      border: 1px dotted red;
    }

 <div>
  This is a test
<hr />
  Try it !
</div>

Ответ №3:

если вы хотите иметь одну пунктирную линию, вам следует сбросить границу и добавить только верхнюю или нижнюю границу:

 hr {
  border: 0;
  border-top: 5px dotted navy;
}

 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>

Ответ №4:

<hr/> Отображается как одна непрерывная строка, потому что вы добавили a background-color . Вы должны использовать border-color вместо этого и добавить border-width .

 hr {
  border-width: 2px;
  border-style: dotted;
  border-color: purple;
  /* background-color: purple; <-- remove this line */
}

 <hr/>

Или просто используйте стенографию.
Например:

 hr {
  border: 2px dotted purple;
}

 <hr/>

Более подробную информацию вы можете найти здесь.