Статьи / Веб-Дизайн / Скругленные углы таблицы при помощи CSS

  2008-11-03 21:14

Одна из самых распространённых проблем при вёрстке макетов является создание закруглённых углов у таблиц и блоков на страницах и приходиться их рисовать, а затем, совершая «танцы с бубном» прикреплять их на страницу, да ещё и следить за кроссбраузерностью вёрстки. Попытаемся решить эту проблему только с помощью CSS.

Конечно самый простой способ - это нарисовать эти самые углы и вставить их в таблицу. либо в отдельные блоки. Но в любом случае их нужно рисовать, и в добавление ко всем файлам на вашем сайте, будут лежать ещё и графические файлы ваших элементов оформления.

Для примера воспользуемся табличной вёрсткой, но тут главное понять сам процесс, тогда и в случае вёрски с помощью слоёв не будет проблем. И так, как уже было сказано, можно делать так:
< table>
< tr>
< td background="corner_left_top.gif">< /td>
< td>< /td>
< td background="corner_right_top.gif">< /td>
< /tr>
< tr>
< td>< /td>
< td>Ваш контент< /td>
< td>< /td>
< /tr>
< tr>
< td background="corner_left_bottom.gif">< /td>
< td>< /td>
< /tr>
< td background="corner_right_bottom.gif">< /td>
< /table>
или
< table>
< tr>
< td>< img src="corner_left_top.gif">< /td>
< td>< /td>
< td>< img src="corner_right_top.gif">< /td>
< /tr>
< tr>
< td>< /td>
< td>Ваш контент< /td>
< td>< /td>
< /tr>
< tr>
< td>< img src="corner_left_bottom.gif">< /td>
< td>< /td>
< td>< img src="corner_right_bottom.gif">< /td>
< /tr>
< /table>

Возьмём div объект и попытаемся создать округлую форму, используя только правила CSS.

По умолчанию, каждый элемент имеет определённую высоту, в зависимости от типа вашего браузера. По этому, очень важное для нас свойство приобретает правило overflow, и для запрета отображения размерности контейнера, ему следует придать значение hidden.

Но можно сделать это всё более продвинуто, избегая использования лишних рисунков, например с помощью JavaScript или CSS. При этом, использование JavaScript, влечёт за собой применение довольно больших и тяжёлых скриптов, так, что уж лучше даже использовать изображения скруглённых углов. А вот вслучае использования CSS представляется достаточно возможностей небольшими затратами построить нужную форму объекта.

Для того, чтобы создать закруглённый угол с помощью CSS, необходимо использовать ряд независимых в плане разметки веб-страниц объектов. Ими могут выступать div, span, b, i и многие другие объекты, которые не имея внутри себя никакого контента, не подчиняются никакому правилу "по умолчанию" и не отображаются на странице.
< style type="text/css">
#block{width:200px}
#1{margin:0}
#2, #3, #4, #5, #6, #7, #8, #9{height:1px;overflow:hidden;background:#0099cc}
#2, #9{margin:0 5 0 5px}
#3, #8{margin:0 3 0 3px}
#4 ,#7{margin:0 2 0 2px}
#5, #6{margin:0 1 0 1px}
#content{padding:5px;background:#0099cc;font:11px Verdana;color:#000}
< /style>
< div id="block">
< div id="1">
< div id="2">< /div>
< div id="3">< /div>
< div id="4">< /div>
< div id="5">< /div>
< div id="5">< /div>
< /div>
< div id="content">
Ваш контент
< /div>
< div id="1">
< div id="6">< /div>
< div id="6">< /div>
< div id="7">< /div>
< div id="8">< /div>
< div id="9">< /div>
< /div>
< /div>
Как видите, всё проще некуда, единственным недостатком данного способа закругления углов в css является не поддерживание данной технологии некоторыми уставшими версиями браузеров. Но как и технологии, так и сами Интернет-навигаторы совершенствуются и будем надеяться в дальнейшем проблем с этим не будет…

Пользуйтесь на здоровье.