Закругленные углы всегда присутствовали в вебдизайне. Ведь посудите сами, одними квадратами оригинальный дизайн не создашь.
Что делали дизайнеры, чтобы достичь нужный результат:
1) закругленные углы делались с помощью изображений; (то есть для каждого угла подготавливалась своя картинка, которая и делала этот эффект)
2) использовали Java script; (соответственно если у пользователя отключены скрипты, то и не видать закругленности)
3) использовали громоздкий код таблиц на html;
Но с выходом CSS3 появилась возможность сделать этот эффект без всяких извращений.
Но ложка дегтя есть и тут - это Internet Explorer, даже 8 версия которого не поддерживает CSS3. Но сейяас мало кто сидит через него, да и при этом все, что они потеряют, это закругленные углы.
Как же нам сделать закругленный углы? Легко!
Напишем небольшой CSS код:
Code
.test{
border:1px solid #DCDCDC;
width:600px;
height:30px;
background:#fff;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
}
Теперь в нужном месте сайта ставим вызов класса:
Code
<div class="test"></div>
И в итоге получим вот такую рамку:
Теперь разберем CSS код.
border-radius:6px — Свойство CSS3. Чем больше значение, тем сильнее округлены будут углы;
-webkit-border-radius:6px — Хак для включения закругления в браузерах Google Chrome и Safari.
-moz-border-radius:5px — Хак для включения закругления в браузере Firefox.
-khtml-border-radius:10px — Хак для включения поддержки закругления в браузере Konquerer. Это из мира Linux.
На этом все!
