Каков наилучший способ создания скругленных углов в Drupal на основе стандартов, совместимых с несколькими браузерами?

Question

В настоящее время я работаю над темой Drupal 6, для которой дизайнер явно просьба использовать МНОГО закругленных углов.

Конечно, я мог бы создать закругленные углы - традиционно - с помощью изображений.Но я знаю, что должны быть также лучшие и более простые способы создания закругленных углов.

Оптимально, я хотел бы написать свой CSS как совместимый со стандартами CSS3, с такими селекторами, как:

h2 {border-radius: 8px;}

Использование специфичного для браузера is CSS также вполне допустимо, например

h2 {-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}

При необходимости я также могу вставить какой-нибудь пользовательский JavaScript вручную.Я просто хочу избежать добавления еще 100 изображений с закругленными углами в мою разметку.

Есть какие-нибудь предложения по наилучшему подходу?

Answer 1

Определите класс типа "roundy-corner" и используйте плагин jQuery corner следующим образом:

$('.roundy-corner').corner();

Вам понадобится плагин jQuery roundy corner:

http://www.malsup.com/jquery/corner/

Мне нравится использовать здесь JavaScript, потому что он не требует никакой дополнительной разметки в исходном документе;скрипт будет вставлять элементы-заполнители по мере необходимости.Кроме того, в далеком-далеком будущем, когда у всех нас будут летающие автомобили и IE будет поддерживать border-radius, вы можете заменить его чистым CSS.

Answer 2

Некоторые примечания, относящиеся к Drupal, по использованию предлагаемого плагина с закругленными углами:

1. Скачать jquery.corner.js и поместите его в папку scripts вашей установки Drupal.Убедитесь, что права доступа к файлам установлены правильно.
2. Загрузите скрипт в вашу тему (Zen), добавив следующую строку в template.php: drupal_add_js('scripts/jquery.corner.js');
3. Назначьте закругленные углы любой части страницы, снова добавив команды оформления в template.php .Обратите внимание, что вам нужно подключить их с помощью метода drupal_add_js.Например:

drupal_add_js(
  "$(document).ready(function() {
       $('#primary a').corner('top round 4px');
       $('.block-inner h2.title').corner('top round 4px');
   });",
  'inline'
);

Вот и все!!!Красивые закругленные углы без каких-либо изображений!