Лучший способ кодировать изогнутые затененные блоки для кросс-браузерной совместимости - PullRequest
Новая
       8

Лучший способ кодировать изогнутые затененные блоки для кросс-браузерной совместимости

0 голосов
/ 13 июля 2010

У меня есть коробки, которые были сконструированы следующим образом

imgur.com/vMN0T.gif

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

Лучший способ сделать это, чтобы он работал во всех браузерах? (IE6 +, FF, Opera, Safari, Chrome)

Ответы [ 4 ]

0 голосов
/ 04 декабря 2011

Я настоятельно рекомендую CSS3Pie (работает в IE6-9).

0 голосов
/ 14 июля 2010

Лучший способ - спроектировать ваш сайт для современных браузеров и позволить таким вещам, как тень от рамки и радиус границы, изящно ухудшаться для старых браузеров и IE.

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

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Боюсь, я не могу помочь с тенями в IE.

0 голосов
/ 17 июля 2010

На самом деле, IE имеет собственное расширение CSS, которое позволяет добавлять тени: 

    .shadowed {
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3); }

Для закругленных углов вам придется использовать изображения или JavaScript.Я попробовал DD_Roundies, и я вполне доволен им (хотя в нем есть несколько ошибок)Вы можете использовать это:

    /*************************************************/
    /* The properties follow this format:            */
    /* property-name: x-offset y-offset blur #color; */
    /*************************************************/

    box-shadow: 0 0 4px #000; /* For Opera */
    -moz-box-shadow: 0 0 4px #000; /* Firefox */
    -webkit-box-shadow: 0 0 4px #000; /* WebKit browsers (Safari, Chrome, etc.) */
0 голосов
/ 13 июля 2010

Если у вас нет требований к IE6, вы можете использовать очень чистые и легкие углы jQuery: http://jquery.malsup.com/corner/

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

...