Свойство 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-left-radius - для закругления верхнего левого угла.
- border-top-right-radius - для закругления верхнего правого угла.
- border-bottom-right-radius - для закругления нижнего правого угла.
- border-bottom-left-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;