CSS скругленные углы стола, градиентный фон - PullRequest
Новая
       16

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

0 голосов
/ 12 мая 2011

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

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

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

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

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

1 Ответ

3 голосов
/ 12 мая 2011

Градиенты : Большинство современных браузеров реализовали их с помощью 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:5px 5px 0px 0px;

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

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

...