Сегодня мы учимся использовать технологию CSS3 для получения закругленных углов без необходимости использования изображений. Мы можем использовать CSS3 для достижения эффекта закругленных углов фона заголовка боковой панели и эффекта закругленных углов окна поиска. Запишите его для дальнейшего использования. W3C уже давно сформулировал свойство CSS3, которое реализует закругленные углы CSS: border-radius Firefox и Safari также реализуют эту функцию через частные свойства:
<div style="background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px Solid #000; Padding: 10px;" >Firefox и Safari реализуют закругленные углы< /дел>
Эффект следующий:
Среди них -moz-border-radius — это частное свойство, используемое Firefox для реализации закругленных углов, а -webkit-border-radius — это частное свойство, используемое основными браузерами Webkit (такими как Safari и Chrome) для реализации закругленных углов If. вам нужно только указать, что определенный угол закруглен. Что касается углов, все они определяют четыре атрибута:
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Конечно, IE (в том числе IE8) его по-прежнему не поддерживает, поэтому эффект можно увидеть только в Firefox, Safari и Chrome.