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

Question

Я видел много кодов для этого, но, похоже, ни один из них не работает очень хорошо или вообще. Я использовал картинки для скругленных углов, но мне нужен код, чтобы он округлял границу <table>. Единственные решения, которые я нашел для этой проблемы, это иметь изображения в ячейках вокруг границы. Что-нибудь еще, что я могу попробовать?

Answer 1

Попробуйте:

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.

Answer 2

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

.element {
    border-radius:5px
}

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

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

Answer 3

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

Другие параметры, не связанные с изображениями, основаны на сценариях, например jQuery Corners или аналогичный сценарий.

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

Answer 4

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

Например, с таким HTML:

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

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

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

Answer 5

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

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

Answer 6

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

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

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

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

Answer 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;
}

Answer 8

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