CSS закругленные углы

Ответ 1

Try:

selector {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

Это будет работать в Firefox, Safari, Chrome и любом другом браузере, совместимом с CSS3. Для этого может быть проще сделать отдельный класс - есть 3 оператора, которые необходимы для полной совместимости.

Кроме того, попробуйте здесь (cssjuice.com) для некоторых других методов, использующих изображения.

Я не совсем уверен, будет ли это работать с таблицей, но если вы полностью контролируете - не используйте <table> для макета. Пожалуйста.

(Примечание. Я считаю, что он отлично подходит для использования табличного тега для табличных данных, а не там, где должны использоваться DIV.)

Обновить: применить только к одному углу:

-moz-border-radius-topleft: 3px;
/* ... */
-webkit-border-top-left-radius: 3px;

Продолжить для topright или top-right.

Ответ 2

Попробуйте селекторы CSS 3:

.element {
    border-radius:5px
}

Для Safari, Google Chrome (Webkit) и Mozilla используйте следующие два селектора (хотя Mozilla поддерживает селектор CSS 3, но не уверен, что другой):

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

Ответ 3

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

Например, с HTML следующим образом:

<ul>
 <li><a href="">something</a></li>
<ul>

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

Существуют функции CSS3 и JS-решения, которые также могут работать, но не полностью совместимы с браузером.

Ответ 4

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

Ваши другие параметры без изображения script основаны на jQuery Corners или аналогичном script.

Оба эти метода имеют оговорки (поддержка IE, посетители с отключенным JavaScript и т.д.). Если вы их используете, я бы сосредоточился на том, чтобы заставить их работать с CSS в браузерах, которые его поддерживают, и просто убедитесь, что он выглядит приемлемым без них в IE.

Ответ 5

Отметьте www.easyimg.com, простое решение, которое не требует CSS-хаков или часов в Photoshop.

Ответ 6

Если вам не нужно работать со всеми браузерами, подумайте об использовании border-radius. Подробнее см. http://www.css3.info/preview/rounded-border/. Новые браузеры Mozilla и Webkit поддерживают этот тег или moz-border-radius и -webkit-border-radius.

Ответ 7

Вот такой способ, который не зависит от браузера (я знаю, он работает в популярных браузерах.) Он не использует таблицу, поэтому вам нужно будет положить таблицу в самый глубоко вложенный div и он длинный и тяжелый, но он работает. Изображения, упомянутые в приведенном ниже коде, - это закругленные углы, которые вы рисуете сами. Радиус угла равен 44px.

Это вариант: http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml

<div class="tl">
    <div class="tr">
        <div class="bl">
            <div class="br">
                <div class="t">
                    <div class="b">
                        <div class="l">
                            <div class="r">
                                <div>Do or do not, there is no try</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.tl
{
    font-family: Verdana, Arial;
    font-size: 16px;
    position: relative;
    left: 30px; 
}

.tl, .tr, .bl, .br
{
    width: 655px;
    height: 250px;
}

.t
{
    width: 567px;
    height: 250px;    
    margin: 0 0 0 44px;
}

.b
{
    width: 567px;
    height: 250px;    
}

.l
{
    width: 655px;
    height: 162px;    
    margin: 44px 0 0 -44px; 
}

.r
{
    width: 655px;
    height: 162px; 
}

.bl
{
    background: url(/images/front/rcbla.png) 0 100% no-repeat;
}

.br
{
    background: url(/images/front/rcbra.png) 100% 100% no-repeat;
}

.tl
{
    background: url(/images/front/rctla.png) 0 0 no-repeat;
}

.tr
{
    background: url(/images/front/rctra.png) 100% 0 no-repeat;
} 

.t
{
    background: url(/images/front/adot.png) 0 0 repeat-x;
}

.b
{
    background: url(/images/front/adot.png) 0 100% repeat-x;
}

.l
{
    background: url(/images/front/adot.png) 0 0 repeat-y;
}

.r
{
    background: url(/images/front/adot.png) 100% 0 repeat-y;
}

Ответ 8

Я предполагаю, что округленный угол CSS выше не будет работать в IE6. Что-то вы можете иметь в виду.

Три сложенных div с фоновыми изображениями - самый простой способ.

<div class="top">&nbsp;</div>
<div class="mid"> <!-- content --> </div>
<div class="bottom">&nbsp;</div>

Фон для вашего div с id mid будет вертикально разбит на CSS. Работает в IE6.

Ответ 9

Я имею тенденцию идти с опцией border-radius person-b, рассмотренной ранее.

Если мне абсолютно необходимо поддерживать IE (т.е. это фундаментальная часть дизайна, а не просто небольшое повышение), я имел некоторый успех с dd_Roundies, который использует VML для выполнения задания.