Создаем закруглённые уголки с помощью CSS 3 - Форум о поисковых системах и социальных сетях

Страница 1 из 1
1

Создаем закруглённые уголки с помощью CSS 3

Skipper

Среда, 22.06.2011, 18:06

Заблокированные

Сообщения: 1242

Репутация: 2002

Одно из наиболее ожидаемых свойств CSS3, несомненно, свойство border-radius. С помощью свойства border-radius можно создавать, такие популярные в последнее время, прямоугольники с закругленными углами, исключительно средствами CSS, не используя никаких изображений.

Для начала создадим простой блок, для которого мы и будем применять свойство border-radius:

Code

В CSS зададим для него высоту, ширину и цвет фона:

Code

#box {
width:590px;
height:100px;
background-color:#6B86A6; }

Добавляем свойство border-radius:

Свойство border-radius объявляется подобно свойствам margin и padding. Вы можете использовать как краткую запись этого свойства для всех четырёх углов прямоугольника, так и отдельно для каждого угла. При краткой записи указывается одно значение для каждого угла:

Code

#box {
-moz-border-radius: 20px;
}

Теперь все четыре угла будут иметь радиус 20px:

Вы также можете указать два значения, первое из которых будет определять радиус для верхнего левого и нижнего правого угла, а второе — для верхнего правого и нижнего левого:

Code

#box {
-moz-border-radius:20px 40px;
}

Если Вы указываете три или четыре значения, они будут применяться в следующем порядке — верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол.

Code

#box {
-moz-border-radius:10px 20px 30px 40px;
}

Объявляем свойство border-radius для каждого угла

Если вы хотите использовать это свойство только для одного угла, то достаточно добавить соответствующее окончание к свойству:
moz-border-radius-topleft для верхнего левого угла;
moz-border-radius-topright для верхнего правго угла;
moz-border-radius-bottomright для нижнего правого угла;
moz-border-radius-bottomleft для нижнего левого угла;

Горизонтальный и вертикальный радиус

Это свойство можно также использовать для создания углов в виде четверти эллипса. Для этого необходимо добавить второе значение для нужного угла:

Code

#box {
-moz-border-radius-topleft: 30px 15px;
}

Как Вы можете видеть на картинке верхний левый угол имеет немного «скошенный» вид. Это потому что эти два значения определяют горизонтальный и вертикальный радиус соответственно. Когда используется одно значение браузер интерпретирует его как для горизонтального, так и для вертикального радиуса.

При краткой записи этого свойства значения для горизонтального и вертикального радиуса разделяются слэшем:

Code

#box {
-moz-border-radius: 30px / 15px;
}
#box {
-moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
}

Использование свойства border-radius в Safari и Chrome.

Safari и Chrome используют немного другой синтаксис, основным отличием является использование префикса -webkit, вместо -moz:
-webkit-border-top-left-radius для верхнего левого угла;
-webkit-border-top-right-radius для верхнего правого угла;
-webkit-border-bottom-right-radius для нижнего правого угла;
-webkit-border-bottom-left-radius для нижнего левого угла;

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

Этот код не будет работать в Safari и Chrome:

Code

#box {
-webkit-border-radius: 10px 20px 30px 40px;
}

Правильный код будет выглядеть так:

Code

#box {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
}

Горизонтальный и вертикальный радиус в Safari и Chrome.

В Safari и Chrome можно также указывать горизонтальный и вертикальный радиус:

Code

#box {
-webkit-border-top-left-radius: 30px 15px;
}

При краткой записи можно указывать горизонтальный и вертикальный радиус для всех углов прямоугольника только если эти значения одинаковые для каждого угла. Также не требуется использование слэша:

Code

#box {
-webkit-border-radius: 30px 15px;
}

Источник

Пост отредактировал Skipper - Среда, 22.06.2011, 18:07

Профиль

[LiKER]

Среда, 22.06.2011, 19:27

Проверенный

Сообщения: 1150

Репутация: 5911

Потёрто ...

Пост отредактировал [LiKER] - Четверг, 23.06.2011, 08:38

Профиль

Aeon

Среда, 22.06.2011, 19:46

Проверенный

Сообщения: 627

Репутация: 1989

[LiKER], это не фотошоп, а верстка.

Профиль

Skipper

Среда, 22.06.2011, 19:56

Заблокированные

Сообщения: 1242

Репутация: 2002

Причем тут вообще фотошоп?

оО

Профиль

Charumo

Среда, 22.06.2011, 20:00

Проверенный

Сообщения: 195

Репутация: 322

Походу модератор увидев надпись CSS3 подумал, что это фш версии цс)) Хотя не читать контент и переносить в другой раздел, хм. Браво!

Профиль

[LiKER]

Среда, 22.06.2011, 20:08

Проверенный

Сообщения: 1150

Репутация: 5911

Skipper, приношу извинения, ступил.
Перенёс обратно.

Профиль

Skipper

Среда, 22.06.2011, 20:25

Заблокированные

Сообщения: 1242

Репутация: 2002

Quote (Charumo)

Ну критиковать все могут, бывает уж.

Профиль

SmarT07

Четверг, 23.06.2011, 00:11

Проверенный

Сообщения: 392

Репутация: 481

Skipper, если честно мне скрипты очень понравились,думаю буду использовать их в будущем добавлю тему в закладки))Спасибо

Проще будь э

Профиль

UnderWatter

Пятница, 01.07.2011, 19:44

Проверенный

Сообщения: 303

Репутация: 303

Skipper, это CSS а не PS Csx chuckle

Quote (SmarT07)

если честно мне скрипты очень понравились,думаю буду использовать их в будущем добавлю тему в закладки))Спасибо

Если бы тут скрипты были...

Уважаем не тот человек, у кого много постов, уважаем человек- у которого дельные сообщения...

Профиль

Sezy

#10

Воскресенье, 03.07.2011, 04:52

Проверенный

Сообщения: 321

Репутация: 286

Quote (Skipper)

Этот код не будет работать в Safari и Chrome:
Код: | Выделить всё
#box {
-webkit-border-radius: 10px 20px 30px 40px;
}

Что за бред... Прекрасно будет работать.

Только нубы используют

Quote (Skipper)

#box {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
}

Верстка макетов - http://megasoft.3dn.ru/forum/95-265075-1

Профиль

вебдизанер_ЛЁХА

#11

Воскресенье, 03.07.2011, 11:09

Пользователь

Сообщения: 62

Репутация: 406

конечно хорошо про уголки но ie6, ie7, ie8 нифига не потдерживают эту фичу
http://htmlbook.ru/css/border-radius
http://htmlbook.ru/css/-webkit-border-radius
http://htmlbook.ru/css/-moz-border-radius

а я модеров люблю
всех их вместе соберу
вдоль по линии прибоя
далеко гулять пошлю!!!

Профиль

SinCara

#12

Воскресенье, 03.07.2011, 17:41