---
metadata:
  - name: generator
    content: Diplodoc Platform v5.50.3
alternate:
  - https://divkit.tech/docs/en/concepts/visual.md
  - https://divkit.tech/docs/ru/concepts/visual.md
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt

# Визуальное оформление элементов

## Видимость элементов {#visibility}

Элементы могут иметь разные состояния видимости, которые влияют на их отображение и поведение:

- `visible` — элемент видим и занимает место в layout;
- `invisible` — элемент невидим, но продолжает занимать место в layout;
- `gone` — элемент полностью скрыт и не занимает места в layout.

### Наследование видимости

При вложении элементов в контейнеры действует система наследования видимости:
- Элементы внутри контейнера наследуют видимость родительского контейнера
- Фактическая видимость элемента определяется как минимальная видимость между его собственной видимостью и видимостью родительского контейнера
- Приоритет видимости: `gone` > `invisible` > `visible`

Это означает, что если контейнер имеет видимость `invisible` или `gone`, все его дочерние элементы также будут невидимы, независимо от их собственных настроек видимости.

## Прозрачность {#alpha}

Для элемента можно установить прозрачность, указав значение от 0 до 1 параметра `alpha`:

- `0` — полностью прозрачное;
- `0,5` — полупрозрачное;
- `1` — непрозрачное изображение.

![](../_images/create-card/alpha.png =300x)

{% cut "Посмотреть интерактивный пример" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/visual_1.json" width="700" height="500" frameborder="1"></iframe>


{% endcut %}



## Фон {#background}

У всех визуальных элементов может быть задан фон в [background](https://divkit.tech/docs/ru/concepts/divs/2/div-background.md). Типы фона:

- [linear-gradient](https://divkit.tech/docs/ru/concepts/divs/2/div-linear-gradient.md) — линейный градиент;
- [radial-gradient](https://divkit.tech/docs/ru/concepts/divs/2/div-radial-gradient.md) — радиальный градиент;
- [solid](https://divkit.tech/docs/ru/concepts/divs/2/div-solid-background.md) — сплошной цвет;
- [image](https://divkit.tech/docs/ru/concepts/divs/2/div-image-background.md) — картинка;
- [nine-patch-image](https://divkit.tech/docs/ru/concepts/divs/2/div-nine-patch-background.md) — изображение в формате [nine patch](https://developer.android.com/studio/write/draw9patch).

В массив можно добавить несколько разных фонов, наложенных друг на друга. При этом нужно, чтобы верхний фон был частично прозрачным, иначе нижние слои не будет видно.

![](../_images/create-card/div-background.png =300x)

{% cut "Посмотреть интерактивный пример" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/visual_2.json" width="700" height="700" frameborder="1"></iframe>

{% endcut %}



## Рамка {#button}

С помощью параметра `border` можно задать рамку, её цвет и ширину, скругление углов у элемента, а также тень:

1. Добавьте элемент, например [текст](https://divkit.tech/docs/ru/concepts/divs/2/div-text.md).
1. Добавьте рамку [border](https://divkit.tech/docs/ru/concepts/divs/2/div-border.md) и скруглите углы с помощью параметра `corner_radius`.
1. Добавьте [заливку](https://divkit.tech/docs/ru/concepts/divs/2/div-background.md).
1. Добавьте на получившуюся кнопку [действие](https://divkit.tech/docs/ru/concepts/interaction.md), которое она будет выполнять при нажатии.


{% cut "Посмотреть интерактивный пример" %}


<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/visual_3.json" width="700" height="500" frameborder="1"></iframe>

{% endcut %}


<!-- source: ru/_includes/index/troubleshooting.md -->
## Узнать больше {#troubleshooting}

Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: [https://t.me/divkit_community_ru](https://t.me/divkit_community_ru).



[Репозиторий DivKit](https://github.com/divkit/divkit)




<!-- endsource: ru/_includes/index/troubleshooting.md -->