Да, бывает необходимо сделать скругленные углы средствами HTML+CSS.
Методов несколько. Добавлю их в эту напоминалку по мере вспоминания.
1. Метод №1.
Нам понадобится круглая картинка (радиусом соответсвующая радиусу необходимых заготовок). Например черный круг радиусом 20px.
И небольшие инструкции CSS.
Как сделать закругленные углы в Photoshop (Фотошоп)?
Инструкция:
1. Открываем изображение: "File::Open::Изображение"
2. Добираемся до инструмента "Rounded Rectangle Tool" в панельке "Tools".
3. Сверху в настройках инструмента выбираем "Paths" и задаем радиус закругления.
4. Идем к нашему изображению и выделяем область точно по краям.
5. После кликаем правой кнопкой мышки по изображению и в выпадающем меню жмем "Make Selection". Перед Вами выскачет окошко и ничего не меняя просто жмем "Ok". Тем самым мы выделили область закругления…
6. Далее жмем "Select::Inverse….
7. Теперь жмем кнопку "Delete" для удаления выделенного.
8. И ctrl+D для снятия выделения.
Что должно быть в HTML:
<div id="corners"> <div id="tl"></div> <div id="tr"></div> <div id="br"></div> <div id="bl"></div> <div id="spacer"><div>Содержимое блока</div></div> </div>
Что должно быть в CSS:
div#corners {border:1px solid black; position:relative;} div#tl {background:transparent url(../images/corner.gif) no-repeat scroll 0 0; left:-1px; top:-1px;} div#tr {background:transparent url(../images/corner.gif) no-repeat scroll 100% 0; right:-1px; top:-1px;} div#bl {background:transparent url(../images/corner.gif) no-repeat scroll 0 100%; bottom:-1px; left:-1px;} div#br {background:transparent url(../images/corner.gif) no-repeat scroll 100% 100%; bottom:-1px; right:-1px;} div#spacer {padding:5px;} /* необязетельно */
Должно работать так: когда картинки отключены — углы прямоугольные, когда включены — углы скругленные прямоугольными секторами картинки.
В продолжение вероятно добавлю методы получения закруглений без помощи картинок, только CSS.
Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">