Знакомство с SVG / Скругление углов [4/15]
×

Скругление углов [4/15]

Скруглением углов прямоугольника управляют параметры rx и ry. Атрибут rx задаёт скругление по горизонтали, а ry — по вертикали. Если атрибут ry не задан, он будет равен rx.

Пример кода:

<rect width="50%" height="100" rx="50" ry="20"/>

В задании курса «Рамки и фоны, часть 2» описан похожий эффект скругления углов, но с помощью CSS-свойства border-radius.


Выполнить задание
HTML
<svg> <rect width="50%" height="100" x="25%" y="25" fill="orange"/> </svg>
CSS
svg { border: 1px solid #dddddd; }
HTML Academy
  1. Задайте значение rx равным 20.
  2. Задайте значение ry равным 50, обратите внимание как изменилась форма фигуры.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.