Новые уроки CSS: Скругление углов при помощи CSS

Вторник, 04 Января 2011 г. 14:48 + в цитатник

или как скруглить углы различными способами

Содержание страницы

Пример скругления углов в CSS
Скругление углов в CSS для всех видов браузеров или как скруглить углы с помощью изображения, блока и CSS атрибутов
Кросс-браузерное скругление углов в CSS или как скруглить углы с помощью изображения, таблицы и CSS атрибутов

Пример скругления углов в CSS:

                                                      <title>Скругление углов в CSS</title>

            <style type="text/css">

            div {

            border: 1px solid #434343;

            padding: 10px;

            background: #e3e3e3;

            -moz-border-radius: 10px;

            -webkit-border-radius: 10px;

            width: 500px

            }

            </style>

            </head>

            <body>

            <div>

            Блок будет иметь скругленные углы, если страницу рассматривать в браузерах Firefox, Chrome или Safari.

            </div>

            </body>

Результат:

Как скруглить углы в CSS

Атрибуты и значения

-moz-border-radius – определяет скругление углов для браузеров Firefox.
-webkit-border-radius – определяет скругление углов для браузеров Safari.

Еще один пример скругления углов с помощью CSS:

                                                      <title>Скругление углов в  CSS</title>

            <style type="text/css">

            div {

            border: 2px solid #434343;

            padding: 47px;

            background: #e3e3e3;

            -moz-border-radius: 120px;

            -webkit-border-radius: 120px;

            width: 132px

            }

            </style>

            </head>

            <body>

            <div>

            Блок будет иметь скругленные углы, если страницу рассматривать в браузерах  Firefox, Chrome или Safari.

            </div>

            </body>

Результат:

Как скруглить углы в CSS - продолжение

В момент написания урока, скругление углов не поддерживают web-браузеры Internet Explorer и Opera. Как будут развиваться события дальше пока не известно. Прийдут ли разработчики браузеров к единодушному решению на предмет введения border-radius — остается вопросом.

Чтобы вы могли скруглить углы уже сегодня, я подготовил для вас два примера кросс-браузерных методов скругления углов с помощью изображения и CSS.

Скругление углов в CSS для всех видов браузеров

или как скруглить углы с помощью изображения и CSS атрибутов

Помню, мне было нужно скруглить углы для блока меню... Первое, что я сделал — это создал в графическом редакторе Photoshop два небольших изображения:

Скругление углов с помощью изображения и CSS

Добавил следующий код:

                                                      <title>Скругление углов в CSS</title>

            <style type="text/css">

            div.menu {border:1px solid #bbb; border-bottom:none; border-top:none; width:204px; background-color:#f6f6f6}

            </style>

            </head>

            <body>

            <img src="../images/gtop.png" alt="" />

            <div class="menu">

            </div>

            <img src="../images/gbot.png" alt="" />

            </body>

В результате у меня получился вот такой контейнер:

Скругление углов с помощью изображения, блока и CSS

Если к стилевым описаниям блока прибавить height:100px, получится вот что:

Скругление углов с помощью изображения, блока и CSS атрибутов

Кросс-браузерное скругление углов в CSS

или как скруглить углы с помощью изображения, таблицы и CSS атрибутов

Данный метод скругления углов заключается в следующем: в одной из ячеек мы размещаем первое изображение, в другой – второе, а центральную ячейку форматируем при помощи CSS так, чтобы все правильно «срослось».

Рассмотрим пример:

                                                      <title>Скругление углов в CSS</title>

            </head>

            <body>

            <table cellpadding="0" cellspacing="0">

            <tr>

            <td><img src="../images/gtop.png" alt="" /></td>

            </tr>

            <tr>

            <td  style="border-left:1px solid #bbbbbb; border-right:1px solid #bbbbbb; height:140px; background-color:#f6f6f6"></td>

            </tr>

            <tr>

            <td><img src="../images/gbot.png" alt="" /></td>

            </tr>

            </table>

            </body>