Блог

Главная - Вопросы по программированию - CSS Закругленные углы таблицы, градиентный фон

CSS Закругленные углы таблицы, градиентный фон

#css #background #css-tables #rounded-corners

#css #фон #css-таблицы #закругленные углы

Вопрос:

Вот моя скрипка:

http://jsfiddle.net/6yU6N/10/

Я хочу немного поработать с CSS-магией над заголовком таблицы:

  • Закругленные углы в верхнем левом и правом верхнем углу
  • Градиентный цветной фон
  • Градиентная граница
  • Кроссбраузерная совместимость

Как все это можно сделать?

Комментарии:

1. вы можете найти решение здесь

Ответ №1:

Градиенты: Большинство современных браузеров реализовали это с помощью CSS3, но для Internet Explorer вам придется использовать специальные фильтры. Поскольку CSS3 является формирующимся стандартом, вы должны использовать префиксы, специфичные для браузера. 

 .gradient{
    background: -moz-linear-gradient(top, #fff, #eee);
    background: -webkit-linear-gradient(top, #fff, #eee);
    background: -o-linear-gradient(top, #fff,#eee);
    background: linear-gradient(top, #fff, #eee);
    /* versions of IE use these */
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffffff',EndColorStr='#eeeeee');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#eeeeee)";
}

может быть третий подход
имейте в виду, что вы всегда можете использовать изображение с повторяющимся символом x на заднем плане.

Закругленные углы: в большинстве ваших современных браузеров закругленные углы покрыты border-radius:

 border-radius:5px 5px 0px 0px;

Для более старых версий Internet Explorer вам, к сожалению, придется выполнять более хакерские действия, которые, вероятно, на самом деле не стоят времени и усилий. http://webdesign.about.com/od/css/a/aa072406.htm это пример, который я нашел, просматривая веб-страницы очень быстро.

По моему опыту, MDC обычно довольно хорошо объясняет функции браузера, их совместимость и альтернативы для других браузеров.

Комментарии:

1. Я почти уверен, что CSS3 PIE может заставить IE выполнять практически все функции CSS3. Я думаю, что они все еще работают над IE9 и градиентами фона (во всяком случае, последнее, что я слышал).