| Kosten | Четверг, 08 Февраля 2018, 20:43 | Сообщение 1 |
| Этой статье рассматривается свойство css3 border-radius, которое позволяет разработчикам легко создавать закругленные углы на своих веб страницах. До css3 разработчикам необходимо было использовать такие подходы, как использование угловых изображений, чтобы создать иллюзию закругленных углов или организовать несколько тегов div, чтобы обеспечить гладкий округлый вид.
Свойства CSS3 border-radius и box-shadow позволяют дизайнеру легко создавать закругленные поля ввода с чистым HTML и CSS без необходимости прибегать к изображениям. Это сообщение показывает, как это можно сделать и имеет дело с префиксами поставщиков и другими проблемами в кросс браузере, чтобы обеспечить доступ ко всем входным полям во всех браузерах.
Неудивительно, что это так часто встречается для начинающих разработчиков CSS, или, в моем случае, плохих графических дизайнеров со слишком большим количеством CSS, чтобы создавать квадратные макеты!
Однако предстоящая спецификация CSS3 предлагает нам проблеск надежды в виде закругленных углов. Правильно, когда CSS3 обычно поддерживается, мы сможем защитить все эти заостренные края и украсить сеть в процессе.
И еще лучше, несколько браузеров уже поддерживают закругленные углы! Поскольку я пишу это, вы в значительной степени ограничены Mozilla, Firefox и Safari 3. Тем не менее этот список со временем будет расти, поэтому не повредить, чтобы начать играть с этой функцией. Особенно учитывая, что в браузерах, которые не поддерживают закругленные углы, ничего плохого не происходит, пользователь просто видит правильные квадратные углы.
На данный момент, чтобы заставить код работать, вы застряли в использовании проприетарный тегов CSS, они не будут проверяться, но они просто будут игнорироваться браузерами, которые их не поддерживают. Сам код довольно прост; например, чтобы создать div с красивыми закругленными углами с радиусом 5 пикселей, вы просто напишете примерно так.
Код div.rounded {
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; }
И это правило создаст div, который выглядит так:
Два свойства примечания здесь, moz-border-radius и webkit-border-radius. Первый способ заключается в том, как указать радиус и количество пикселей от гипотетической центральной точки до края окружности, созданной округленный угол в браузерах.
Правило не ограничивается только изогнутыми цветами фона. Если бы вы добавили границу к элементу, граница также закруглялась. Например, цитата блока может быть написана так:
Код blockquote {
margin: 1em 20px;
padding: 10px;
border: 2px solid #555;
background-color: #f2f2f2;
color: #555;
font-size: 140%;
text-align: justify;
-moz-border-radius: 10px;
-webkit-border-radius: 10px; }
Результат в цитате блока, который имеет много стиля, не полагаясь на изображения для выполнения задачи:
И наконец вы также не ограничены ни закругленными углами, ни ничто. Используя это свойство, вы можете указать, какие углы вы хотите округлить в своем CSS. Однако важно отметить, что версия этого правила на основе Firefox немного отклонилась от стандарта W3C, то есть написана несколько иначе, чем правило, основанное на Safari. Например, рассмотрим эти два правила используемые для округления верхнего левого угла поля:
Код -moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
Это небольшая разница в великой схеме вещей, но довольно критическая, если вы хотите, чтобы ваши закругленные углы отображали, где и как они должны! Используя возможность округления отдельных углов, вы можете создавать причудливые сообщения:
Код .alert {
border: 2px solid #fc0;
padding: 8px 10px;
font-size: 120%;
color: #c90;
font-weight: bold;
background-color: #ff9;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px; }
Или вы можете применить закругленные углы к трем из четырех краев комментария пользователя, в результате чего появился псевдо-голосовой пузырь, без единого изображения:
Код .comment {
border: 1px solid # 999;
background-color: # d8d8f4;
margin: 1em 40px;
обивка: 15px;
-moz-border-radius-topleft: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px; }
И это всего лишь несколько способов из сотен способов, которыми вы можете использовать силу закругленных углов всего несколькими строками кода. С такими методами, как это в нашем распоряжении, легко понять, почему мы все так охотно ожидаем CSS3.
| | Страна: (RU) |
| |
