X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Свободный доступ Премиум

Доступ всей нашей библиотеке Премиум Статьи концентратор, файлы проекта и первые 10% от каждого Учебник-Video из Интернет библиотека Учебник .

Создайте свой бесплатный аккаунт!

Созданный закругленными углами на макета объектов в CSS3
  • Созданный закругленными углами на макета объектов в CSS3

Перевод Google Translate

Если вы еще не делали много читать вверх еще на том, что нового в CSS3 , это довольно удивительным. Есть все виды новых внедряемых возможностях, в том числе градиенты, несколько столбцов, границы изображения, и тот, который мы будем говорить посмотреть здесь, пограничных радиуса. Пограничная радиус позволяет нам установить закругленные углы на иное прямоугольных объектов в нашей веб-макетов.

Current versions of each popular browser support the new border radius property, but unfortunately it simply doesn't render in earlier versions. And that's the thorn in many web designer's side. However, I'll show you a cool trick to ensure it works in nearly every browser.

Шаг 1 - Применение CSS3 пограничной Радиус

Во-первых, давайте применим границы радиуса. В таблице стилей, найти правило, которое вы хотели бы применить закругленным углом эффект. Часто, это будет ID селектор, который по контролю за дел элемента. Убедитесь также, что вы также применения цвета фона или границы (или оба), так что вы можете видеть углы!

Затем добавьте "границы радиуса" свойства в правиле, а затем значение. Чем выше значение, которое вы используете, тем больше завернул за угол.

Здесь, я подаю заявление границы радиус до моего # Содержимое ID селектор, который контролирует дел, который держит мою страницу содержания, как вы можете видеть в прилагаемом скриншоте. Убедитесь в том, чтобы сохранить свою работу и проверить вашу работу в вашем браузере.

Если вы все еще получаете 90-градусный углы, то ваш браузер это тот, который не поддерживает эту функцию. Но не вещи в пакет только пока. Давайте проверим, что прохладно трюк, который я упоминал ранее.

Шаг 2 - Обеспечение закругленным углом эффект работает

Как уже упоминалось, только последних версий популярных браузеров поддерживают границы радиуса CSS3 собственности. Итак, как можно убедиться, что ваш макет будет работать для пользователей, которые до сих пор используют браузеры, версии или два позади? Вы можете использовать дополнительный код, следующим образом.

Во-первых, давайте добавим "-МОЗ границы радиуса:", а затем значения радиуса. Это цели, что называется Gecko браузеры - в первую очередь FireFox.

Теперь давайте добавим "-WebKit-границы радиуса", а затем то же самое значение, что мы использовали выше. Это будет удар по всем WebKit браузеры, как Chrome и Safari. После добавления сохранить вашу работу и обновите страницу в браузере.

Шаг 3 - исключение подтверждает правило

Теперь то, что о Internet Explorer, любимый браузер каждый веб-дизайнера (именно так), спросите вы? Ну, все из вышеперечисленных вариантов не будет работать. На самом деле, код, который мы добавили к этому моменту будут просто игнорироваться Explorer, и углы будут просто оказывать в своих умолчанию 90-градусный стиль, который лучше, чем это перерыв, не так ли? Можно снять закругленные углы в IE, но знаю, что это немного дополнительной работы, а может быть, это то, что мы могли бы получить в будущем в наконечник. В настоящее время, однако, наслаждаться закругленными углами и во всех остальных браузерах!

CSS это прекрасно. Узнайте больше на проектирование плавающей макеты CSS .


Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link