Stfw.RuКак добавить скругленные уголки в браузере Firefox?
🕛 19.01.2009, 23:24
В CSS3 должен появиться новый стилевой атрибут border-radius для установки радиуса скругления блока. Пока этот атрибут не поддерживает ни один браузер, но Firefox предлагает его равнозначную замену, правда, работающую только в этом браузере.В браузере Firefox используется атрибут -moz-border-radius, который задает радиус скругления всех уголков одновременно или отдельно для каждого уголка. Если указано одно значение, оно применяется ко всем уголкам, если четыре, то по очереди к верхнему левому уголку, затем к правому верхнему, правому нижнему и левому нижнему уголку. В примере 1 показано, как изменить вид блока.
Пример 1. Скругление для браузера Firefox
HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Скругленные уголки</title> <style type="text/css"> .corner { -moz-border-radius: 8px; /* Радиус скругления */ padding: 10px; /* Поля вокруг текста */ border: 1px solid #000; /* Параметры рамки */ background: #bdc6ba; /* Цвет фона */ } </style> </head> <body> <div class="corner"> Магматическая дифференциация, а также комплексы фораминифер, известные из валунных суглинков роговской серии, высвобождает анортит, причем, вероятно, быстрее, чем прочность мантийного вещества. </div> </body>
</html>Результат данного примера показан на рис. 1.Рис. 1. Вид блока со скругленными уголками
Удобство атрибута -moz-border-radius очевидно. Радиус скругления задается в одном месте, причем одновременно для блока можно как устанавливать рамку, так обойтись и без нее.
Firefox также поддерживает атрибуты, которые позволяют установить радиус скругления для отдельных уголков:
-moz-border-radius-topleft - верхний левый угол;
-moz-border-radius-topright - верхний правый угол;
-moz-border-radius-bottomleft - нижний левый угол;
-moz-border-radius-bottomright - нижний правый угол.
В примере 2 показано изменения радиуса скругления для двух уголков.
Пример 2. Скругление двух уголков
HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Скругленные уголки</title> <style type="text/css"> .corner { -moz-border-radius-bottomleft: 24px; /* Нижний левый уголок */ -moz-border-radius-topright: 24px; /* Верхний правый уголок */ padding: 10px; /* Поля вокруг текста */ border: 1px solid #000; /* Параметры рамки */ background: #f0f0f0; /* Цвет фона */ } </style> </head> <body> <div class="corner"> Для месторождений, связанных с артезианскими бассейнами по литологическому составу водовмещающих пород, грунт аккумулирует сейсмический авгит, в то время как значения максимумов изменяются в широких пределах. </div> </body>
</html>
Учтите, что создание скругления указанными способами приводит к невалидному стилевому коду, поскольку все приведенные атрибуты не входят в спецификацию CSS.