Итак, разметка:
HTML
Имеем простой блок с текстом. Применяем к нему следующий CSS-код и получаем надпись с обводкой.
CSS
На самом деле ничего сложного: цвет фона у блока совпадает с цветом шрифта у текста. Обводка текста появляется за сет применения к нему CSS-правила text-shadow
, причем с тенями со всех сторон. Когда размер шрифта у надписи крупный,
то смотрится вполне прилично. При уменьшении текста, на мой взгляд выглядит хуже, но это мое мнение. Если интересно, то можно открыть демо-страничку, изменить размер шрифта при помощи средств для веб-разработчика и сделать
свои выводы.
Свойство text-shadow
поддерживается всеми современными браузерами. Что же касается IE, то в нем свойство работает начиная с версии 10. В более старших версиях тень можно сделать с помощью filter
.