Стили CSS для теней и скругления уголков

В данной статье приведены примеры использования свойств CSS (каскадных таблиц стилей) для задания скругления уголкам, теней для текста и блочных элементов.

border-radius - устанавливает радиус скругления уголков рамки.

Синтаксис: border-radius: <радиус>{1,4}

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (1 значение - единый радиус для всех четырех уголков; 2 значения - первое задает радиус верхнего левого и нижнего правого уголка, второе - верхнего правого и нижнего левого уголка; 3 значения - первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка; 4 - по очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка).

text-shadow - добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия.

Синтаксис: text-shadow: <сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

box-shadow - добавляет тень к элементу.

box-shadow: <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius, то тень также получится с закругленными уголками.
Параметры: 
inset - тень выводится внутри элемента;
сдвиг по x - смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево.
сдвиг по y - смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх.
размытие - задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
растяжение - положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
цвет - цвет тени в любом доступном CSS формате, по умолчанию тень черная.

В таблице ниже приведены несколько примеров использования данных свойств:

Пример	Описание	HTML-код
LADY	Текст с тенью	<span style="color: #3d73a9; font-size:x-large; text-shadow: 2px 2px 2px #7d7dac;">LADY</span>
Дамский клуб	Прямоугольник со скругленными углами	<div style="border:2px solid #3d73a9; border-radius:20px; padding:10px">Дамский клуб</div>
Дамский клуб	Скруглять можно как все углы, так и только выбранные	<div style="border:2px solid #3d73a9; border-radius: 0 20px 0 20px; padding:10px">Дамский клуб</div>
	При больших значениях угла скругления из прямоугольника получится шар	<div style="border:2px solid #3d73a9; width:40px; height:40px; border-radius:40px;">&nbsp;</div>
	Скругление можно применять не только к блокам, но и рисункам	<img src="https://lady.webnice.ru/forum/images/avatars/0/4.img" style="border-radius:15px"><br> <img src="https://lady.webnice.ru/forum/images/avatars/0/4.img" style="border-radius:80px 0 0 0"><br> <img src="https://lady.webnice.ru/forum/images/avatars/0/4.img" style="border-radius:100px">
	Тень для блока	<div style="width: 100px; height: 50px; border-radius: 10px; border: 1px solid #3d73a9; box-shadow: 5px 5px 5px #7d7dac;">&nbsp;</div>
	При нулевых параметрах сдвига тени, можно произвести эффект внешнего "свечения"	<div style="width: 100px; height: 50px; border-radius: 10px; box-shadow: 0px 0px 20px #8ABCEE">&nbsp;</div>
	При добавлении параметра inset тень для блока можно сделать "внутренней"	<div style="width: 100px; height: 50px; border-radius: 10px; border: 1px solid #3d73a9; box-shadow: 0px 0px 30px #8ABCEE inset;">&nbsp;</div>
	Вы можете задать несколько теней, перечислив параметры каждой через запятую	<div style="width: 100px; height: 50px; box-shadow: 3px 3px 0px red, 6px 6px 0px yellow, 9px 9px 0px green; border: 1px solid red; border-radius: 5px 5px 50px;">&nbsp;</div>
lady	И всё вместе :)	<div style="width: 120px; height: 120px; border-radius: 120px; text-align: center; border: 1px solid #8abcee; box-shadow: 0 0 50px red inset, 0 0 20px green;"> <span style="font-size: 50px; line-height: 120px; font-weight: bold; color: #2E6E9E; text-shadow: 5px 5px 1px pink;">lady</span> </div>

Задать стили можно, редактируя HTML-код напрямую, открыв его по кнопке или в окне свойств для элементов, для которых оно доступно, например, рисунков: