Много лет я испытывал огромные страдания, создавая скругленные углы для полей на своих веб-страницах. Я не самый хороший графический дизайнер, поэтому процесс всегда был крайне утомительным и мучительным. И я знал, что не одинок. Просмотрите любую видеопрезентацию, посвященную новым возможностям HTML5, и вы увидите, что аудитория начинает неистовствовать при каждом упоминании свойства CSS, позволяющего с легкостью создавать скругленные углы. Казалось бы, что может быть проще — это всего лишь банальные скругленные углы! Однако в течение многих лет они представляли собой невероятную сложность для разработчиков.
Вот почему среди всех новых возможностей и поразительных свойств, добавленных в CSS3, в первую очередь я хочу познакомить вас с border-radius (листинг 3.3).
Body {
Text-align: center;
}
#mainbox {
Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;
-moz-border-radius: 20px;
-webkit-border-radius: 20px; border-radius: 20px;
}
#title {
Font: bold 36px verdana, sans-serif;
}
Свойство border-radius пока что находится на этапе разработки, поэтому мы добавили префиксы — moz — и — webkit — (так же, как делали это для свойств, которые изучали в главе 2). Если все углы должны быть одинаковыми, то свойству можно передать только одно значение. Однако аналогично свойствам margin и padding, данное свойство позволяет указывать индивидуальные значения для каждого угла.
Листинг 3.4. Разные значения для всех углов поля
Body {
Text-align: center;
}
#mainbox {
Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;
-moz-border-radius: 20px 10px 30px 50px;
-webkit-border-radius: 20px 10px 30px 50px; border-radius: 20px 10px 30px 50px;
}
#title {
Font: bold 36px verdana, sans-serif;
}
Как вы видите в листинге 3.4, четыре значения, связанные со свойством border-radius, представляют четыре местоположения в следующем порядке: верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол. Значения всегда перечисляются, начиная с верхнего левого угла по часовой стрелке.
Так же, как свойства margin и padding, свойство border-radius способно принимать набор всего из двух значений. В таком случае первое значение связывается с первым и третьим углами (верхний левый, нижний правый), а второе — со вторым и четвертым углами (верхний правый, нижний левый). Повторю еще раз — углы всегда отсчитываются по часовой стрелке, начиная с левого верхнего.
Для определения формы углов можно также указывать двойные значения, разделенные косой чертой. В таком случае значение слева от косой черты представляет горизонтальный радиус, а значение справа — вертикальный радиус. Сочетание таких значений определяет форму эллипса (листинг 3.5).
Листинг 3.5. Эллиптические углы
Body {
Text-align: center;
}
#mainbox {
Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;
-moz-border-radius: 20px / 10px;
-webkit-border-radius: 20px / 10px;
Border-radius: 20px / 10px;
}
#title {
Font: bold 36px verdana, sans-serif;
}
Скопируйте в CSS-файл с именем newcss3.css стили, которые вы хотели бы протестировать, и откройте HTML-файл из листинга 3.1 в своем браузере.
Добавить комментарий