Нормативная документация специалиста сварочных работ котельное оборудование Смио.

Разделы

Недорогие диваны,кресла и кровати - мебель на заказ. Мебельный салон КОМФОРТ.

Скругленные уголки в браузере Firefox и Safari

В CSS3 должен появиться новый стилевой атрибут border-radius для установки радиуса скругления блока. Пока этот атрибут не поддерживает ни один браузер, но Firefox предлагает его равнозначную замену, правда, работоспособную только в этом браузере.

В браузере Firefox используется атрибут -moz-border-radius, который задает радиус скругления всех уголков одновременно или отдельно для каждого уголка. Если указано одно значение, оно применяется ко всем уголкам, если четыре, то по очереди к верхнему левому уголку, затем к правому верхнему, правому нижнему и левому нижнему уголку. В примере 1 показано, как изменить вид блока.

Пример 1. Скругление для браузера Firefox

<!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">
   Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper 
   suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis 
   te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo 
   consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Вид блока со скругленными уголками

Удобство атрибута -moz-border-radius очевидно. Радиус скругления задается в одном месте, причем одновременно для блока можно как устанавливать рамку, так обойтись и без нее.

Firefox также поддерживает атрибуты, которые позволяют установить радиус скругления для отдельных уголков:

-moz-border-radius-topleft — верхний левый угол;
-moz-border-radius-topright — верхний правый угол;
-moz-border-radius-bottomleft — нижний левый угол;
-moz-border-radius-bottomright — нижний правый угол.

Браузеры Safari и Google Chrome также поддерживают атрибут -webkit-border-radius, его значением выступает радиус для всех уголков блока (пример 2).

Пример 2. Скругление для браузера Safari

<!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; /* Радиус скругления для Firefox */
    -webkit-border-radius: 8px; /* Радиус скругления для Safari и Chrome */
    padding: 10px;
    border: 1px solid #000;
    background: #bdc6ba;
   }
  </style>
 </head>
 <body>
  <div class="corner">
   Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper
   suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis
   te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo
   consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2

Рис. 2. Скругленные уголки в браузере Chrome

Аналогично Firefox в Safari поддерживаются атрибуты, задающие радиус скругления для отдельных уголков:

-webkit-border-top-left-radius — верхний левый угол;
-webkit-border-top-right-radius — верхний правый угол;
-webkit-border-bottom-left-radius — нижний левый угол;
-webkit-border-bottom-right-radius — нижний правый угол.

Учтите, что создание скругления указанными способами приводит к невалидному стилевому коду, поскольку все приведенные атрибуты не входят в спецификацию CSS. Также методы не работают в браузерах Internet Explorer и Opera.

Антон, 02.05.2009

В Мозилле выглядит фигово из-за пикселей.

Разделы

Термины

Скругленные уголки в браузере Firefox и Safari

Отправить комментарий