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

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

Ответы на вопрос(9)

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

Ваши другие параметры не изображения основаны на сценарии, какJQuery Corners или похожий сценарий.

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

 14 июл. 2009 г., 21:35
JQuery Corners - отличная реализация без изображений, даже поддерживающая сглаживание в IE. Ради интереса я взглянул на сгенерированный DOM после «настройки» работает в IE ... Ой! Их примерная страница точно закруглена в углу, но я бы сказал, что около 85% + окончательной разметки были DIV и стили, добавленные для поддержки IE. ;-)

Проверять, выписыватьсяwww.easyimg.com, простое решение, которое не требует CSS хаков или часов в фотошопе.

Решение Вопроса

Пытаться:

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

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

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

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

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

Update: применить только к одному углу:

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

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

 14 июл. 2009 г., 20:50
Простого решения IE8 нет?
 14 июл. 2009 г., 20:52
Я не уверен насчет IE8, если честно - я использую Firefox;)
 14 июл. 2009 г., 21:01
Речь идет не о том, чтобы использовать их, когда вы хотите, для чего хотите, а об их использовании.properly при отображенииtabular Информация. Например, если у меня есть список записей для отображения из базы данных, этоproper чтобы отобразить их вtable, Таблицы не предназначены для макетов, но ониare Предназначен для отображения табличной информации, используя для этого правильную семантику.
 14 июл. 2009 г., 20:53
Таблица может содержатьtabular Информация. Все еще есть очень большая семантическая ценность вproper использование таблиц.
 15 июл. 2009 г., 19:12
Если не совсем безобразно позволить IE иметь квадратные границы, почему бы просто не сделать это? Пусть в хороших браузерах есть красивые вещи.

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

.element {
border-radius:5px
}

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

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

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

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

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

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

Я склонен идти сborder-radius Вариант человек-б освещен ранее.

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

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

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

<div class="tl">
    <div class="tr&qu,ot;>
        <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;
}
 Tony C15 июл. 2009 г., 18:08
Это очень тяжело. Не будет ли проще использовать стол?

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

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

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

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

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

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

Ваш ответ на вопрос