Курс CSS. Пример 01 урока 46.

Оператор поддержки
Птичка CSS - это наше всё!
Свойство border-radius для закругления углов блочных элементов.

Свойство border-radius является сокращенной записью, где указываются параметры закругления всех четырех углов в стандартном для CSS порядке: верх-лево (top-left), верх-право (top-right), низ-право (bottom-right), низ-лево (bottom-left).

border-radius:5px 10px 20px 40px;
См пример с такими параметрами:
border-radius:5px 10px 20px 40px;

Можно указывать не все 4, а только 3, 2 или 1 параметр.

Если не указывается значение для низ-лево (bottom-left), то для него используется значение верх-право (top-right).

Если не указывается значение для низ-право (bottom-right), то для него используется значение верх-лево (top-left).

Если не указывается значение для верх-право (top-right), то для него используется значение верх-лево (top-left).

border-radius:10px;
Чаще всего используется вариант с одним параметром.

См пример:
border-radius:10px;

В результате получается аккуратный блок с одинаковой обточкой углов.

border-radius:40px/20px;
Для создания несимметричных закруглений используются конструкции типа 40px/20px; (т.е. с указанием двух значений через слэш).

См пример:
border-radius:40px/20px;

Возможно закругление одного конкретного угла.

В таких случаях используются свойства типа:
border-*-radius:
border-top-right-radius:20px;
Например, если по дизайну элемент прижат к правому верхнему углу окна (или внешнего блока), вполне логично обточить только его правый верхний угол.

См пример:
border-top-right-radius:20px;

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

Свойство box-shadow для создания тени блочных элементов.

Примечание. Свойство box-shadow прикрепляет к блочному элементу одну или несколько теней. Если теней несколько, они разделяются запятыми. Каждая тень имеет 2-4 значения, опциально можно установить цвет и тип тени.
box-shadow: 20px 10px 100px 50px #777777;
Если какие-то значения не указаны, считается, что они равны 0.

См пример:
box-shadow: 20px 10px 100px 50px #777777;

Это пример с большими значениями размера тени (50 пикселей) и блюра (100 пикселей).

box-shadow: 10px 10px 5px #77B777;
См пример:
box-shadow: 10px 10px 5px #77B777;

Это пример компактной тени, которая отцвечивает зеленью.

box-shadow: 10px 10px 40px #777777 inset;
См пример:
box-shadow: 10px 10px 40px #777777 inset;

Это пример тени, которая отбрасывается внутрь объекта.

Такой эффект достигается с помощью значения inset.

Свойство border-image для создания рамок с помощью графических файлов.

Файл, который будет использоваться для создания графических границ. Прежде всего, необходимо подготовить графический файл, который будет использоваться для создания графических границ →

В данном файле должны быть элементы для границ и угловые элементы.



border:12px ridge #00FF00;
border-image:url('images/im_border_1.png') 20 20 round;
См пример:
border:12px ridge #00FF00;
border-image:url('images/im_border_1.png') 20 20 round;

Теперь попробуем вместо round использовать repeat.

border:12px ridge #00FF00;
border-image:url('images/im_border_1.png') 20 20 repeat;
См пример:
border:12px ridge #00FF00;
border-image:url('images/im_border_1.png') 20 20 repeat;

Теперь попробуем stretch.

border:12px ridge #00FF00;
border-image:url('images/im_border_1.png') 20 20 stretch;
См пример:
border:12px ridge #00FF00;
border-image:url('images/im_border_1.png') 20 20 stretch;