Кросс-браузерные кривые границы

Каков наилучший способ получить кросс-браузер (ff, ie > 6, chrome, opera, safari) изогнутые углы на div. Я нашел эту статью http://jonraasch.com/blog/css-rounded-corners-in-all-browsers, и я последовательно выполнял инструкции шаг за шагом, вот мой css:

#content_wrapper{
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;
    border-radius: 25px;
    background-color:#F2DADC;
    border:25px solid #ECD3D5;
    height:780px;
    opacity:0.7;
    width:747px;
    margin:0px auto;
    position:relative;
    display:block;
    zoom:1;
}

<!--[if lte IE 8]>
<style>
#content_wrapper{
behavior: url(template/css/border-radius.htc);
border-radius: 20px;
}
</style>
<![endif]-->

Может кто-нибудь указать мне, что я делаю неправильно, или есть лучший способ добиться такого же эффекта, его работа во всех браузерах, кроме IE

Ответы

Ответ 1

Если это немодифицированный фрагмент из вашего HTML файла, ясно, почему он не работает: вы используете тег <style> в другом <style>.

В качестве первого теста попробуйте заменить весь фрагмент (удалите IE-блок!):

#content_wrapper{
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;
    behavior: url(template/css/border-radius.htc);
    border-radius: 25px;
    background-color:#F2DADC;
    border:25px solid #ECD3D5;
    height:780px;
    opacity:0.7;
    width:747px;
    margin:0px auto;
    position:relative;
    display:block;
    zoom:1;
}

Если это работает, вы можете переместить отдельные части IE в отдельный <style>:

<style type="text/css">
#content_wrapper{
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;
    border-radius: 25px;
    background-color:#F2DADC;
    border:25px solid #ECD3D5;
    height:780px;
    opacity:0.7;
    width:747px;
    margin:0px auto;
    position:relative;
    display:block;
    zoom:1;
}
</style>


<!--[if lte IE 8]>
<style type="text/css">
#content_wrapper{
    behavior: url(template/css/border-radius.htc);
    border-radius: 20px;
}
</style>
<![endif]-->

Если у вас все еще есть проблемы, попробуйте пример zip файла с веб-сайта google: http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

Ответ 2

Вы можете поместить JQuery Curvy Corners, чтобы использовать все это из коробки.

Ответ 3

Цитата из статьи, которую вы упомянули:

Путь к border-radius.htc работает иначе, чем вы можете ожидать - в отличие от путей фонового изображения, которые относятся к таблице стилей, этот путь относится к странице, с которой вы вызываете CSS.

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

Ответ 5

Вот css:

.curved {

 -moz-border-radius:10px;

 -webkit-border-radius:10px;

 behavior:url(border-radius.htc);

}

И вот как вы могли бы использовать его, конечно:

<div class="curved">Curvd div</div>

Ответ 6

Если вам интересно получить округленные углы в IE, это может быть полезно - http://css3pie.com/

Ответ 7

Привет, я собираюсь просто быть ленивым и вставить ссылку на кого-то работу elses.... Я не хочу награду

попробуйте этот. http://dillerdesign.com/experiment/DD_roundies/