Как создать блок со скругленными углами без изображений?
В спецификацию CSS3 вошло замечательное свойство: border-radius, которое закругляет углы блочных элементов.
К сожалению, это свойство поддерживается только последними версиями браузеров IE9.0, Opera10.50 Firefox 4.0.. более ранние версии игнорируют данное свойство. Однако, если уж очень сильно хочется сделать скруглённые углы у блоков, без использования изображений - которые могут не загружаться пользователем по тем или иным причинам, можно пойти на хитрость.
Для начала взгляните на многократно увеличенный рисунок-схему одного из "скруглённых углов" почему в кавычках? Да потому что если разобраться, в этом примере скруглять мы ничего не будем, а будем лишь имитировать округление углов блока <div> с помощью четырёх маленьких блочков расположенных так как, собственно, и показано на рисунке. Конечно, чтобы увеличить радиус и гладкость скругляемого угла нам потребовалось бы гораздо больше блоков, но на стадии обучения остановимся на этом варианте.
Что мы видим?:
- Блок 1 (в примере ниже выведен в класс с именем .b1 )
- его высота всего 1 пиксель, а отступы с правой и левой сторон от границ элемента родителя (того самого элемента, который мы "скругляем") 4 пикселя.
- Блок 2 (в будущем класс .b2)
- высота 1 пиксель, отступы 2 пикселя.
- Блок 3 (класс .b3)
- чуть чуть повыше его высота 2 пикселя, отступы слева и справа 1 пиксель.
- Блок 4 (в будущем класс .b4)
- высота 1 пиксель, отступов от границ элемента родителя не имеет.
Теперь собственно займемся тем, что опишем параметры данных блоков с помощью средств CSS, а заодно выведем каждый блок в отдельный класс.
Вот что получается:
.b1 { margin: 0 4px; height: 1px;}/* b1 с отступами слева и справа 4 пикселя, его высота 1 пиксель */
.b2 { margin: 0 2px; height: 1px;}/* b2 с отступами слева и справа 2 пикселя, его высота 1 пиксель */
.b3 { margin: 0 1px; height: 2px;}/* b3 с отступами слева и справа 1 пикселя, его высота 2 пикселя */
.b4 { margin: 0 0px; height: 1px;}/* b4 отступов не имеет,высота 1 пиксель */
Ну а теперь осталось лишь в нужном нам порядке разместить данные блоки "пустышки" в элементе углы которого должны быть круглыми а посередине вставить блок с содержанием.
Вот так:
<div class="rounded">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<div class="content">У этого блока скруглённые углы</div>
<div class="b4"></div>
<div class="b3"></div>
<div class="b2"></div>
<div class="b1"></div>
</div>
А вот пример целиком:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>блок с круглыми углами</title>
<style type="text/css">
.rounded {width: 250px;} /* Здесь описание стиля для элемента родителя */
.b1, .b2, .b3, .b4 {
background: #cc9; /* Цвет фона для блоков b1, b2, b3, и b4 */
overflow: hidden; /* Обманываем IE6, которому указанные размеры и отсутствие содержания до лампочки.. */
}
.b1 { margin: 0 4px; height: 1px;}/* b1 с отступами слева и справа 4 пикселя, его высота 1 пиксель */
.b2 { margin: 0 2px; height: 1px;}/* b2 с отступами слева и справа 2 пикселя, его высота 1 пиксель */
.b3 { margin: 0 1px; height: 2px;}/* b3 с отступами слева и справа 1 пикселя, его высота 2 пикселя */
.b4 { margin: 0 0px; height: 1px;}/* b4 отступов не имеет,высота 1 пиксель */
.content {
background: #cc9; /* Цвет фона блока с текстом */
padding: 12px; /* Поля вокруг текста*/
}
</style>
</head>
<body>
<div class="rounded">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<div class="content">У этого блока скруглённые углы</div>
<div class="b4"></div>
<div class="b3"></div>
<div class="b2"></div>
<div class="b1"></div>
</div>
</body>
</html>
Итак, у нас получился кроссбраузерный, резиновый блок с круглыми углами без использования изображений. По-моему неплохо..
