Используйте Html5 и CSS для достижения эффекта тени текста.

Два дня назад симпатичная девушка, изучавшая интерфейс HTML5, спросила меня, как добиться эффекта тени текста. Она рассказала мне о text-shadow. Она тоже знала о text-shadow, но не смогла сделать так, как ей хотелось. На самом деле, новые возможности CSS3 очень мощные. Не ограничивайте свое мышление слишком сильно. Ладно, сплетни, давайте сначала посмотрим на эту текстовую тень.

text-shadow Параметры тени текста: Параметр 1: первое значение длины используется для установки значения горизонтального смещения тени объекта. Может быть отрицательным. Параметр 2: второе значение длины используется для установки значения вертикального смещения тени объекта. Может быть отрицательным. Параметр 3: если указано третье значение длины, оно используется для установки значения размытия тени объекта. Отрицательные значения не допускаются. Параметр 4: Установите цвет тени объекта.

текстовая тень: 10 пикселей 10 пикселей 50 пикселей # 000;

Как нам добиться эффекта, как на картинке выше?

HTML-структура CSS-стиль стиль шрифта цвет шрифта тень текста Затем давайте посмотрим на конкретный код:

HTML:

 <div class=text>[Тысячи характеров] Шан Сюэтан</div>

CSS:

 .text{ шрифт: жирный 100 пикселей/1,5 'Microsoft Yahei'; цвет: dodgerblue;/*text-shadow*/ text-shadow: 10px 10px 50px #000; /*text-shadow: 10px 10px 50px #000,-10px - 10 пикселей 50 пикселей #f00;*/}

Теперь давайте посмотрим, как сделать эффект маленькой красавицы, просящей меня на лицевой стороне..

На самом деле все очень просто, перейдем непосредственно к коду~

HTML:

 <div class=text>[Тысячи характеров] Шан Сюэтан</div>

CSS:

 body { background: #000; color: #fff;}.text{ шрифт: жирный 100 пикселей/1,5 Georgia, без засечек;/*Различные цвета, размеры размытия нескольких разных значений*/ text-shadow: 0 0 10px #fff , 0 0 20 пикселей #fff, 0 0 30 пикселей #fff, 0 0 40 пикселей #ff00de, 0 0 70 пикселей #ff00de, 0 0 80 пикселей #ff00de, 0 0 100 пикселей #ff00de, 0 0 150 пикселей #ff00de;}

Расширьте свое мнение. На самом деле, стили CSS3 очень интересны. Иногда даже небольшое изменение может привести к очень интересным эффектам^.^

Вышеупомянутое представляет собой введение редактора в использование Html5 и CSS для создания эффектов тени текста. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!