Кроссбраузерный border-radius

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

FF, Safari, Chrome делают это через свойства с своими особыми префиксами и Opera — без префиксов. В стороне у нас стоит, как всегда, IE.

К счастью, IE можно довольно красиво победить его же средствами. Одно из понравившихся мне решений, использующее VML и behaviour — curved-corner. Для использования сливаем border-radius.htc, складываем рядом с CSS и используем следующий код:


.my-block {
  /* Для хороших браузеров */
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  -khtml-border-radius: 10px; /* KHTML */
  border-radius: 10px; /* CSS3 */
  /* Для плохих IE */
  behavior: url(border-radius.htc); /* учим IE border-radius */
}

Да, кстати, по соседству можно найти менее востребованный, но всё же полезный behaviour для box-shadow.

Демо

Поделиться в соц. сетях

РќСЂР°РІРёС‚СЃСЏ

Слава:

21.08.2011 в 23:24

Проблема в том, что если див которому делают радиус и т.д. находится в другом контейнере у которого есть свой background, то ничего работать не будет, т.к. бакграунд родителя какбы закрывает всё что происходит внутри. Свойство z-index мне не помогло, только position:absolute; для внутреннего дива помог, но в этом случае див ставится абсолютным и не смещает нижние дивы, а наезжает на них при растягивании.
Вобщем, вот такие неприятности (

21.08.2011 в 23:32

вот такая разметка у меня:
.all_site {
background: url(«../images/general/bg.png») repeat-y scroll 0 0 transparent;
margin: 0 auto;
padding: 17px 24px 0 0;
width: 1000px;
}
.sub-category{
padding:17px 20px;
width: 189px;
position:absolute;/*хотелось бы чтоб без него работало!!!*/
/* Для хороших браузеров */
-moz-border-radius: 0 0 11px 11px; /* Firefox */
-webkit-border-radius: 0 0 11px 11px; /* Safari, Chrome */
-khtml-border-radius: 0 0 11px 11px; /* KHTML */
border-radius: 0 0 11px 11px; /* CSS3 */
-webkit-box-shadow: #666 0px 2px 5px;
-moz-box-shadow: #666 0px 2px 5px;
box-shadow: #666 0px 2px 5px;
background: white;
/* Для плохих IE */
behavior: url(/PIE.htc); /*тут использован pie, но он работает также как и border-radius.htc …*/
}

…………………

………….

ARMENIUM Portfolio