WordPress Округлые рамки вокруг каждого отдельного виджета - PullRequest
Новая
       3

WordPress Округлые рамки вокруг каждого отдельного виджета

0 голосов
/ 03 июня 2011

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

http://wpcreations.net/wptest/

У меня сейчас коробка. Мне нужно, чтобы оно было округлено, и оно должно быть совместимо с разными браузерами. Заранее спасибо.

I

Ответы [ 2 ]

0 голосов
/ 03 июня 2011

Вы можете выполнить закругленные углы на каждом виджете через border-radius.

В таблицу стилей вашей темы добавьте: 

.widget { 
   border-radius:10px; 
   -moz-border-radius:10px; 
   -webkit-border-radius:10px; 
}

Для разных цветов фона вам нужно настроить таргетинг на каждый виджет отдельно и указать для него цвет в таблице стилей.

И чтобы IE6-8 вел себя с закругленными углами, вы могли бы использовать " Изогнутые углы ". Он не будет обязательно подтвержден, но будет выглядеть так, как вы хотите.

IE9 уже поддерживает border-radius, но вы должны правильно указать свой метатег: 

<meta http-equiv="X-UA-Compatible" content="IE=9" />

// EDIT

Чтобы использовать Curved Corners , сначала загрузите самую последнюю версию здесь . Тогда все, что вам нужно сделать, это загрузить файл border-radius.htc на ваш сервер, где вы сможете получить к нему доступ; вообще в папке css вашей темы. После этого, где бы вы ни хотели иметь радиус границы, вы добавляете behavior: url(border-radius.htc) к CSS.

Наш пример с добавленными изогнутыми углами border-radius.htc: 

.widget { 
   border-radius:10px; 
   -moz-border-radius:10px; 
   -webkit-border-radius:10px;
   behavior: url(http://path.to.file/border-radius.htc); 
}

Надеюсь, это поможет.

0 голосов
/ 03 июня 2011

Если вы хотите, чтобы в IE6 / 7/8 не было закругленных углов, тогда только CSS выполнит это: 

.rounded_corners {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

Обратите внимание, что свойства -moz- и -webkit- должны поддерживатьстарые браузеры Mozilla и Webkit.Новейшие браузеры, включая IE9, поддерживают border-radius как есть.

...