Самый простой способ добавить границу CSS, тень и закругленные углы для моего контента

Хорошо, у меня неплохо работает мой сайт здесь: http://www.marioplanet.com

Но я понял, что если монитор конечного пользователя достаточно большой, чтобы отображать анимацию по бокам страниц (что в основном может быть на каждом мониторе настольного компьютера и на некоторых ноутбуках), то я считаю, что мой основной контент будет выглядеть лучше с небольшим красным / черная рамка, несколько закругленных углов и, возможно, даже тень.

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

Если я смогу заставить его работать только с CSS для большинства браузеров, за исключением IE и отката к плагину jQuery/JS для IE, это тоже здорово. Или даже полностью убрать его из IE, но это не очень приятно! :)

ОБНОВЛЕНИЕ:

Хорошо, я могу применить его к моему заголовку <div>, как вы можете видеть прямо сейчас, но когда я пытаюсь применить его к общей оболочке <div>, я ничего не получаю. Это может быть потому, что мне нужно сначала указать свойства width и height в моем CSS.

Спасибо!

ОБНОВЛЕНИЕ ОБНОВЛЕНИЕ:

Я обнаружил, что самый простой способ сделать границы — это использовать следующие селекторы CSS3:

border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;

Которые все работают как шарм!!


person Qcom    schedule 19.08.2010    source источник


Ответы (4)


ОБНОВИТЬ

Недавно я начал использовать http://css3please.com/. Это одинаково здорово!


Проверьте это: http://css3pie.com/

PIE делает Internet Explorer 6-8 способным отображать несколько наиболее полезных функций оформления CSS3.

Его легко использовать и интегрировать, он позволяет использовать функции CSS3, такие как радиус границы, тень, градиентный фон и т. д. и, что самое главное, он совместим с IE!

Надеюсь, это поможет!

person Hristo    schedule 19.08.2010
comment
Не за что :) Значит ли это, что это ответило на ваш вопрос? Если это так, пожалуйста, проверьте мой ответ :) - person Hristo; 21.08.2010

CSS3 может делать все, что вам нужно, и его поддерживает большинство браузеров, кроме IE8. (Однако следующая версия Internet Explorer будет поддерживать эти функции.)

Посетите css3.info для получения дополнительной информации.

person BlueCode    schedule 19.08.2010

Плагин jquery угол — лучший плагин для создания закругленных углов, а Dropshadow — хороший эффект тени. Это буквально две строки кода (игнорируя код плагина) :)

person Teja Kantamneni    schedule 19.08.2010
comment
Зачем использовать JS, если CSS может сделать эту работу? Конечно, IE не может этого сделать, но Lynx тоже не может, и никто не парится по этому поводу. Слишком часто все просто бросают jQuery на каждое простое решение. - person Rob; 20.08.2010
comment
Ну, я думаю, что jQuery все еще можно использовать как запасной вариант, не так ли? За исключением того, что благодаря тому, что Христо указал на PIE, я могу просто использовать это! :) - person Qcom; 21.08.2010
comment
@Rob В вопросе он явно просил плагин jQuery в качестве запасного варианта. Плагины, которые я предложил, будут использовать css3, если браузеры могут в противном случае использовать div для выполнения этой работы. Кроме того, jQuery действительно упрощает работу. - person Teja Kantamneni; 21.08.2010

http://www.cssplay.co.uk/boxes/four_cornered.html

http://www.cssplay.co.uk/boxes/ имеет закругленные углы, тени и многое другое. 100% CSS без использования JS, работает в IE.

person Ken    schedule 19.08.2010