Блог

Главная - Вопросы по программированию - Как создать фоновый css div / закругленные углы?

Как создать фоновый css div / закругленные углы?

#html #css

#HTML #css

Вопрос:

Как я могу создать следующий стиль html / css (закругленные углы, основной цвет фона), выделенный в красном поле:

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

Ответ №1:

Используйте свойство border-radius CSS для создания закругленных границ:

 -moz-border-radius: 5px;    /* Firefox 3.6-, removed in Firefox 13 */
-webkit-border-radius: 5px; /* Safari 4-, Chrome 3- */
border-radius: 5px;     /* Firefox 4 , Safari 5 , Chrome 4 , Opera 10.5 , IE9  */

Вы можете не указывать префиксы, потому что Firefox 3.6 или старые браузеры webkit почти исчезли.

Хотя в старом (IE8-) можно получить закругленные углы, используя divs images или PIE.htc, я не рекомендую этого делать: PIE не очень надежен, и добавление нескольких HTML-хаков только для того, чтобы заставить что-то работать в старом IE, является пустой тратой времени.

Смотрите также: MDN: border-radius .

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

1. Реально, вам нужно только border-radius: 5px . Текущие версии всех браузеров, которые поддерживают border-radius , поддерживают его без префикса поставщика, и делали это некоторое время.

2. В FireFox 3.6, который все еще широко используется, -moz- префикс по-прежнему необходим. У многих пользователей нет последней версии браузера.

3. Вы правы -moz- , я недостаточно тщательно продумал.