Блог

Главная - Вопросы по программированию - Цвет фона вокруг текста

Цвет фона вокруг текста

#html #css

#HTML #css

Вопрос:

Как настроить закругление краев следующим образом . Пример с закругленными краями.

 <p>
  <span style="background-color: #9B3434;">
    <font color="white" face="Arial" >
       Dieses Feld darf nicht leer sein, geben Sie bitte die erforderliche Information ein.
    </font>
  </span>
</p>

Ответ №1:

ДЕМОНСТРАЦИЯ

Не используйте <font> его как в html начала 90-х, вместо этого оформляйте с помощью css.

HTML

 <p>
<span>Dieses Feld darf nicht leer sein, geben Sie bitte die erforderliche Information ein.</span>
</p>

css

 p {
    padding: 7px;
    border: 2px dashed gray; /* to create a dashed border over the text */
    width: auto;
    display: inline;
}

span {
    background-color: #9B3434;
    color: #fff;
    padding: 5px;
    border-radius: 5px; /* this gives the rounded look */
    font-family: arial;
    font-size: 12px;
}

body {
    margin: 20px; /* for showing the example well, ignore this */ 
}

Комментарии:

1. Спасибо за ваш пример, но почему я не просто округляю текст, мне не нужно пустое пространство. Это проблема в моем коде выше? Пример

2. Это потому, что ваши теги не закрыты должным образом. вы должны закрыть свои теги как <p><span>.....<font>...</font></span></p> . По сути, <p> является блочным элементом и занимает всю ширину, поскольку блочные элементы имеют тенденцию занимать всю ширину. Таким образом, вы получаете полную ширину, поскольку ваши теги не закрыты должным образом.

3. подождите, я отредактирую ваш вопрос и исправлю закрытие тега

Ответ №2:

Используйте тег «border-radius» в стиле ..!

например

 border-radius: 10px;
margin-left: auto;
margin-right: auto;

Комментарии:

1. это работает только для новых браузеров. пожалуйста, добавьте информацию о том, как это сделать в IE.

Ответ №3:

Это называется радиусом границы. Существует несколько вариантов, так что читайте по этой ссылке.

HTML:

 <div class="rounded">
    Lorem Ipsum Stuff
</div>

CSS:

 .rounded {
    -moz-border-radius: 10px; /* For Firefox/Gecko Engine */
    -webkit-border-radius: 10px; /* For Safari   Chrome*/
    border-radius: 10px; /* For IE 9 */
    background: #be4298;
    padding: 8px;
    width: 130px;
}

Обратите внимание, что большинству браузеров теперь нужно будет использовать только border-radius , поэтому, если вы не абсолютно уверены, что ни один из старых браузеров не будет использовать ваш сайт, включите два других.

Демонстрация JSFiddle

Метки: