Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



CSS3 Закругленные углы



CSS3 Закругленные уголы границ

CSS3 свойству border-radius, можно придать любой элемент "закругленных углов".


CSS3 свойство border-radius

CSS3 свойство border-radius определяет радиус угла элемента.

Совет: Это свойство позволяет добавлять закругленные границы к элементам!

Вот три примера:

1. Закругленные углы для элемента с заданным цветом фона:

Закругленные уголы!

2. Закругленные углы для элемента с границей:

Закругленные уголы!

3. Закругленные углы для элемента с фоновым изображением:

Закругленные уголы!

Вот код:

#rcorners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}
Попробуйте сами »

Совет: свойство border-radius сокращенное свойство для свойств border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius.



CSS3 закругленный каждый угол границы

CSS3 свойство border-radius может иметь от одного до четырех значений.

Вот правила: Четыре свойства - border-radius: 15px 50px 30px 5px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому углу, третье значение применяется к нижнему правому углу, а четвертое - к нижниму левому уголу):

Три свойства - border-radius: 15px 50px 30px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому и нижнему левому углы, и третье значение применяется к нижнему правому углу):

Два свойства - border-radius: 15px 50px; (первое значение применяется для верхнего левого и нижнего правого углов, а второе значение применяется к верхнему правому и нижниму левому углы):

Одно свойство - border-radius: 15px; (значение применяется ко всем четырем углам, которые будут закруглены одинаково:

Вот код:

#rcorners1 {
    border-radius: 15px 50px 30px 5px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners2 {
    border-radius: 15px 50px 30px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners3 {
    border-radius: 15px 50px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners4 {
    border-radius: 15px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}
Попробуйте сами »

Можно также, создать эллиптические углы:

#rcorners1 {
    border-radius: 50px / 15px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners2 {
    border-radius: 15px / 50px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners3 {
    border-radius: 50%;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}
Попробуйте сами »

Практика: закругленные углы

Упражнение: закругленные углы div

Придайте элементу div закругленные углы.

<style>
div {
  background: red;
  : 10px;  
}
</style>

<body>
  <div>Это элемент div. В нем есть какой-то текст.</div>
</body>


Свойства CSS3 закругленных углов

Свойство Описание
border-radius Сокращенное свойство для установки всех четырех свойств border-*-*-radius
border-top-left-radius Определяет форму границы верхнего левого угла
border-top-right-radius Определяет форму границы верхнего правого угла
border-bottom-right-radius Определяет форму границы нижнего правого угла
border-bottom-left-radius Определяет форму границы нижнего левого угла


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.