All Articles Web
Созданный закругленными углами на макета объектов в CSS3
Geoff Blake on Thu, April 21st | 0 comments
If you haven't been doing much reading up yet on what's new in CSS3, it's pretty awesome. There are all sorts of newly introduced possibilities, including gradients, multiple columns, border images, a

Если вы еще не делали много читать вверх еще на том, что нового в 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 .


Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: