CCS3: Border-radius
Для одного проекта пришлось наконец плотно заняться CSS3. Предлагаю ряд заметок для начинающих по самым употребимым новшествам.
Первая — про скругление углов блоков. Работает во всех нормальных браузерах, в IE — с версии 9 (на 31.05.2012)
Простая форма записи такая:
div {
border-radius: 10px;
-webkit-border-radius: 10px;
}
Раньше ещё добавляли -moz-border-radius: 10px;, но с последними обновлениями FF это надобность отпала.
Значений радиуса можно писать более одного. Схема такая:
1) border-radius: 10px 10px
— (левый верхний и правый нижний) + (правый верхний и левый нижний);
2) border-radius: 10px 10px 10px
— (левый верхний и правый нижний) + оба нижних;
3) border-radius: 10px 10px 10px 10px
— все четыре угла по часовой стрелке, начиная от левого верхнего;
4) border-radius: 10px/5px
— овальные углы, первое значение — скругление по x, второе — по y;
Через слэш можно так же, как и без него, вписывать до четырёх значений (для каждого из углов).
В предельном случае — когда значение радиуса совпадает с половиной значения высоты (ширины) элемента, получаем круг (или овал).