Последние учебники веб-разработки
×

CSS Руководство

CSS ГЛАВНАЯ CSS Введение CSS Синтаксис CSS Как CSS Цвета CSS Фон CSS Границы CSS Маржа CSS набивка CSS Высота ширина CSS Текст CSS шрифты CSS связи CSS Списки CSS таблицы CSS Модель Бокса CSS Outline CSS Дисплей CSS Максимальная ширина CSS Позиция CSS терка CSS Inline-block CSS выравнивать CSS Комбинаторы CSS Псевдо-класс CSS Псевдо-элемент CSS Панель навигации CSS Dropdowns CSS Всплывающие CSS Галерея CSS изображение Непрозрачность CSS спрайтов CSS Attr селекторы CSS Формы CSS Счетчики

CSS3

CSS3 Введение CSS3 Закругленные углы CSS3 Пограничные изображения CSS3 Фон CSS3 Цвета CSS3 Градиенты CSS3 Тени CSS3 Текст CSS3 шрифты CSS3 2D Трансформации CSS3 3D Трансформации CSS3 Переходы CSS3 Анимации CSS3 Изображений CSS3 Кнопки CSS3 пагинация CSS3 Несколько столбцов CSS3 Пользовательский интерфейс CSS3 Box Определение размеров CSS3 Flexbox CSS3 Медиа-запросы CSS3 Примеры MQ

CSS Адаптивный веб-дизайн

Адаптивный веб-дизайн вступление Адаптивный веб-дизайн Viewport Адаптивный веб-дизайн Вид сетки Адаптивный веб-дизайн Медиа-запросы Адаптивный веб-дизайн Изображений Адаптивный веб-дизайн Видео Адаптивный веб-дизайн Каркасы

CSS Examples

CSS Примеры CSS викторина CSS сертификат

CSS References

CSS Справка CSS Селекторы CSS функции CSS Ссылка Aural CSS Web Safe шрифты CSS Animatable CSS Единицы CSS PX-EM конвертер CSS Цвета CSS Значения цвета CSS Цвет Названия CSS3 Поддержка браузеров

 

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


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

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


Поддержка браузеров

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

Числа следуют -webkit- или -moz- указать первую версию , которая работала с приставкой.

Имущество
border-radius 5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5

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 border-radius - Указать каждом углу

Если указано только одно значение для border-radius недвижимости, этот радиус будет применен ко всем 4 углам.

Тем не менее, вы можете указать каждый уголок по отдельности, если вы хотите. Вот правила:

  • Четыре значения: первое значение применяется к верхней левой, второе значение применяется к верхней правой, третье значение относится к нижней правой, и четвертое значение относится к нижнему левому углу
  • Три значения: первое значение применяется к верхней левой, второе значение применяется к верхней правой и нижней левой, и третье значение относится к нижней правой
  • Два значения: первое значение применяется к верхней левой и нижний правый угол, а второе значение относится к верхнем правом углу и в левом нижнем углу
  • Одно значение: все четыре угла закруглены одинаково

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

1. Четыре значения - border-radius: 15px 50px 30px 5px :

2. Три значения - border-radius: 15px 50px 30px :

3. Два значения - border-radius: 15px 50px :

Вот код:

пример

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

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

#rcorners6 {
    border-radius: 15px 50px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}
Попробуй сам "

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

пример

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

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

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

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2»


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

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