Рамки с круглыми краями и прозрачность в CSS

Круглые края с помощью CSS

Существует множество способов создания рамок с круглыми краями. И в CCS3 наконец-то включили такую возможность. Разумеется, всеми любимый MS Internet Explorer об этом до сих пор не знает, ну и пошел лесом, все равное его у меня нет;)
Создание рамок в CSS3 очень просто. Правда пока приходится писать 3 варианта кода, ну это не страшно.
Вот CSS свойства для создания закругленных рамок:

CSS	Gecko (Mozilla...)	WebKit (Safari, Konqueror, Arora, Google Chrome и т.д.)
border-radius	-moz-border-radius	-webkit-border-radius
border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius

Если у вас нормальный браузер, то таблица выше должна быть в рамке с закругленными углами. Я думаю, объяснять значения свойств не надо, в них и так все написано. Радиус рамки можно задавать в px, em, pt и т.д.

Вот например текст в рамке с радиусом, равным 1em.

Прозрачность с помощью CSS

Еще одно свойство CSS3 - прозрачность. Позволяет делать элемент прозрачными и полупрозрачными. Как уже говорилось, MS Internet Explorer об этом свойстве не знает и его не поддерживает.
Задается свойство очень просто:
opacity: значение от 0 до 1;
1 - полная непрозрачность, 0 - полная прозрачность

Текст с прозрачностью 0.5

А ниже полностью прозрачный текст:

Полностью прозрачный текст

Можете попробовать выделить строчку выше, скопировать ее в блокнот и убедиться в этом;)