Ви можете досягти цього за допомогою використання text-stroke (створення рамки навколо тексту) і використання text-shadow для встановлення правильного зсуву для синього кольору як кольору тіні. Щоб отримати ефект, властивість кольору має бути так само, як властивість кольору фону навколишнього елемента.11 листопада 2020 р.

Використання властивості фільтра drop-shadow(). У цьому підході ми використовуємо властивість фільтра CSS із функцією drop-shadow(), щоб застосувати ефект тіні до зазначеного елемента HTML. Функція drop-shadow() приймає параметри для горизонтального та вертикального зсувів, радіуса розмиття та кольору для створення ефекту тіні.

Додати тінь до об’єкта

  1. Виберіть зображення, автофігуру, WordArt або текстове поле, яке потрібно змінити.
  2. На вкладці «Формат» клацніть «Ефекти тексту» або «Ефекти фігури» > «Тінь».
  3. Виконайте одну з таких дій: додайте або видаліть тінь. Щоб додати тінь, клацніть потрібний стиль тіні. Щоб видалити тінь, натисніть «Без тіні».

Додати тінь до форми

  1. Виберіть форму. Порада. Щоб додати тінь до кількох фігур одночасно, клацніть першу фігуру, а потім натисніть і утримуйте клавішу Shift, клацаючи інші фігури.
  2. На вкладці «Формат фігури» виберіть. (Ефекти фігури), наведіть вказівник миші на Тінь, а потім виберіть потрібну тінь.

Код для тіні: box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px вставка, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px вставка; Ключове слово inset використовується, щоб вказати, що ми хочемо використовувати тінь усередину, а не поведінку за замовчуванням, тобто назовні.

Щоб додати тінь до кнопки в HTML, ви можете використовувати CSS. Властивість CSS box-shadow дозволяє застосувати ефект тіні до елемента. У наведеному вище прикладі ми визначаємо клас CSS під назвою «shadow-button» і застосовуємо до нього властивість box-shadow.