В этом блоге будут обсуждаться:

• Что такое радиус контура?
• Как применить эффект радиуса контура к элементу HTML?

Что такое радиус контура?

“ контур ” используется для формирования контура элемента, но его нельзя реализовать напрямую. Таким образом, альтернативным методом применения эффекта радиуса к контуру является использование « радиус границы Свойство CSS. Он определяет закругленные углы для контуров.

Как применить эффект радиуса контура к элементу HTML?

Чтобы использовать свойство радиуса контура, следуйте приведенным инструкциям.

Шаг 1: Вставьте заголовки

Сначала вставьте заголовки, используя любой тег заголовка из «

' к '

». Например, мы использовали «

' и '

” для встраивания двух разных заголовков в HTML-документ.

Шаг 2: Добавьте первый контейнер div

После этого добавьте контейнер с помощью « <дел> ' ярлык. Также вставьте « класс ” и укажите имя класса по вашему выбору.

---

---

Шаг 3: Создайте второй контейнер div

Создайте еще один ' див ”, выполнив ту же процедуру:

< h1 стиль знак равно 'цвет:rgb(48, 10, 218)' > Linuxhint LTD Великобритания < / h1 >

< h2 >

Различные примеры использования радиуса границы для создания углов круглого контура.

< / h2 >

< див класс знак равно 'box1-div' >

Linuxhint предоставляет лучший и самый уникальный контент для своих пользователей.

< / див >

< див класс знак равно 'box2-div' >

Он работает с несколькими категориями.

< / див >

Вывод приведенного выше кода показан ниже:

Шаг 4: Установите контур первого контейнера

Получите доступ к первому контейнеру, используя « .box1-div », где « . ” — это селектор для доступа к классу:

.box1-div {

контур : твердый ;

ширина : 300 пикселей ;

набивка : 15 пикселей ;

прибыль : 25 пикселей ;

}

Затем примените перечисленные ниже свойства CSS:

• “ контур ” используется для добавления контура вокруг элемента. Например, его значение установлено как « твердый ».
• “ ширина ” определяет размер элемента по горизонтали.
• “ набивка ” используется для выделения пространства вокруг содержимого элемента.
• “ прибыль ” укажите пространство на внешней стороне границы элемента.

Шаг 5: Установите контур второго контейнера

Теперь получите доступ ко второму элементу с помощью соответствующего класса « .box2-div ”:

Примените свойство CSS « радиус границы ” для определения радиуса элемента. Это свойство позволяет добавить закругленные углы вокруг элемента:

Можно заметить, что мы успешно добавили эффект радиуса контура к элементу HTML.

Заключение

“ контур-радиус ' больше недоступно. Пользователи могут применять свойства радиуса контура с помощью свойств CSS «outline» и «border-radius». “ контур » добавляет контур вокруг элемента, а « радиус границы ” специально используется для стилизации контура. В этом посте продемонстрированы инструкции по добавлению эффекта радиуса контура вокруг элемента в HTML.