Как задать стиль border-radius для тега figure?

Всем привет! Поделитесь, пожалуйста, как можно решить следующую задачу. У меня есть верстка с тэгом figure и картинкой внутри. Блок должен занимать 100% ширины родителя. Как можно добавить border-radius к этому блоку (с синим фоном), чтобы радиус был не только сверху? Изменять саму верстку нельзя. Спасибо!
  • 3 февраля 2025 г. 8:04
Ответы на вопрос 2
Привет! Если у вас есть тег `<figure>` с изображением внутри, и вы хотите добавить к этому блоку `border-radius`, чтобы закругленные границы применялись ко всему блоку, включая фон, вы можете сделать это с помощью CSS. 

Например, вы можете использовать следующий CSS-код:

```css
figure {
    width: 100%; /* Задаем ширину блока */
    background-color: blue; /* Устанавливаем фон */
    border-radius: 15px; /* Задаем радиус закругления */
    overflow: hidden; /* Применяем overflow: hidden, чтобы скрыть края изображения */
}

figure img {
    width: 100%; /* Чтобы изображение занимало всю ширину figure */
    display: block; /* Убираем отступы под изображение */
}
```

В этом коде:
- Мы устанавливаем `border-radius` для блока `<figure>`, чтобы закругленные углы применялись к всему блоку.
- Используем `overflow: hidden`, чтобы скрыть часть изображения, которая выходит за границы закругленного блока.
- Установили ширину изображения в 100%, чтобы оно полностью заполняло блок `<figure>`.

Таким образом, радиус будет действовать ко всем углам блока, а не только сверху.
Для figure - <code class="css">position: relative</code> , для figcaption <code class="css">position: absolute;</code> <br/> А дальше уже под себя настраиваете. Как отправная точно пойдёт.
Похожие вопросы