---
title: "Добавление тени и рамки к GIF"
id: "oformlenie-gif-ten-i-ramka"
project: "Руководство пользователя Документерры"
url: "https://docs.documenterra.ru/articles/manual/oformlenie-gif-ten-i-ramka"
updated: 2026-11-06T08:55:16Z
---

# Добавление тени и рамки к GIF

Эта инструкция поможет вам добавить тень и рамку к GIF-изображениям на страницах документации. Способ работает и для других форматов изображений.

| Функция доступна только для онлайн-документации, при экспорте печатных форматов эффекты не сохранятся. |
| --- |

Следуйте этим шагам:
 
### Шаг 1. Откройте CSS-файл проекта
 
1. Перейдите в режим **Дизайн**.
2. На вкладке **Главная** откройте раздел **Стили**.
3. Нажмите кнопку **Открыть файл для редактирования**. 
 ![Как открыть свойства изображения](/resources/Storage/manual/oformlenie-gif-ten-i-ramka/otkryt-stili-proekta.png)

Откроется первый CSS-файл из списка стилей проекта.
 
### Шаг 2. Добавьте CSS-класс и эффекты
 
Добавьте соответствующий CSS-класс и эффекты.
 
Для добавления тени используйте следующий код:


```css
/* Gifs */
.gifShadow {
  box-shadow: 10px 5px 5px gray;
}
```
 
Для добавления рамки используйте этот код:


```css
/* Gifs */
.gifBorder {
  border: solid;
}
```
 
### Шаг 3. Примените стиль к изображению

1. Вернитесь на страницу с GIF-изображением.
2. Кликните по изображению и нажмите **Свойства изображения…**. 
![Как добавить свойства изображения](/resources/Storage/manual/oformlenie-gif-ten-i-ramka/svojstva-izobrazheniya.png)
3. Выберите созданный CSS-класс (например, .gifShadow или .gifBorder). 
 ![Добавить CSS-класс к изображению](/resources/Storage/manual/oformlenie-gif-ten-i-ramka/dobavit-css-klass.png)
4. Нажмите **ОК**.

Вот, что у нас получилось:
 ![Так выглядит GIF-изображение с добавленной тенью](/resources/Storage/manual/oformlenie-gif-ten-i-ramka/gif-izobrazhenie-s-tenyu.png) 
Готово! Теперь вы можете добавлять любые CSS-эффекты к изображениям.