Что CSS грядущий нам готовит? Часть первая: border-radius
Что CSS грядущий нам готовит? Часть первая: border-radius
Что CSS грядущий нам готовит? Часть вторая: box-shadow
Что CSS грядущий нам готовит? Часть третья: gradient
Что CSS грядущий нам готовит? Часть четвёртая: text-shadow
Что CSS грядущий нам готовит? Часть пятая: rgba и hsla
Новая версия CSS (а именно CSS 3) не за горами, и уже сейчас некоторые браузеры поддерживают новые свойства.Что CSS грядущий нам готовит? Часть вторая: box-shadow
Что CSS грядущий нам готовит? Часть третья: gradient
Что CSS грядущий нам готовит? Часть четвёртая: text-shadow
Что CSS грядущий нам готовит? Часть пятая: rgba и hsla
Что это за свойства и как они могут быть полезны уже сейчас?
Об этом мы сегодня и поговорим, а именно о свойстве border-radius.
Скруглённые углы, наверное, являются главной головной болью для верстальщиков.
CSS 3 предлагает крайне простое решение этого вопроса:
.block {
border-radius: 20px;
}
Примеры
Самый простой вариант
.block {
background-color: #D3E7F5;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
Вместо основного свойства border-radius мы указываем -moz-border-radius и -webkit-border-radius для нормальной работы свойства в Firefox и Safari/Chrome соответственно.
Используем рамку
.block {
background-color: #D3E7F5;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 5px solid #C0DEF1;
}
Закругление для отдельных углов
.block {
background-color: #D3E7F5;
-moz-border-radius: 30px 0px;
-webkit-border-top-left-radius: 30px;
-webkit-border-bottom-right-radius: 30px;
border: 5px solid #C0DEF1;
}
Заметьте, для браузеров на движке Webkit мы определяем стороны по отдельности, так как Webkit по-другому понимает перечисление в теге border-radius.
Не только закруглённые углы
.block {
background-color: #D3E7F5;
-moz-border-radius: 30px / 15px;
-webkit-border-radius: 30px 15px;
}
В этом примере мы делаем овальные углы. Для Firefox размеры угла в теге идут через слэш, тогда как для Safari и Хрома они записываются через пробел.
Отдельный овальный угол
Конечно, можно делать и отдельные овальные углы, например:
.block {
background-color: #D3E7F5;
-moz-border-radius-topleft: 10px 20px;
-webkit-border-radius-topleft: 10px 20px;
}
В этом примере только верхний левый угол будет скошенным.
Поддержка браузерами
Свойство border-radius сейчас поддерживает Firefox (начиная с версии 1.0), Safari (начиная с версии 3.0) и Chrome (все версии).Не так давно Opera заявила о поддержке свойства border-radius в версии 10.50, причём без приставки (т. е. для неё можно будет писать просто border-radius: 20px).
К сожалению, IE даже в восьмой версии не поддерживает данное свойство.
И как его использовать?
- Можно плюнуть на остальные браузеры и использовать border-radius для Firefox, Chrome и Safari.
- Можно использовать border-radius для вышеперечисленных браузеров, а для IE и Opera использовать другой вариант (этот, например)
- Можно отказаться от закруглённых углов, пока все браузеры не будут в полной мере поддерживать border-radius.
Выбор за вами.
top-left пишется через '-'.