Как создавать тени для элементов с закругленными углами?

Для создания теней для элементов с закруглёнными углами можно использовать свойство border-radius в CSS. lady.webnice.ru developer.mozilla.org Оно устанавливает радиус скругления уголков рамки. lady.webnice.ru

Некоторые возможности свойства:

• Одно значение. lady.webnice.ru Устанавливает единый радиус для всех четырёх уголков. lady.webnice.ru
• Два значения. lady.webnice.ru Первое задаёт радиус верхнего левого и нижнего правого уголка, второе — верхнего правого и нижнего левого. lady.webnice.ru
• Три значения. lady.webnice.ru Первое устанавливает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка. lady.webnice.ru
• Четыре значения. lady.webnice.ru По очереди устанавливают радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка. lady.webnice.ru

Свойство box-shadow добавляет тень к элементу. lady.webnice.ru html5book.ru Тень представляет собой копию элемента, смещённую на указанное расстояние. html5book.ru Если для элемента с тенью задан border-radius, то отбрасываемая тень также будет с закруглёнными углами. developer.mozilla.org

Некоторые параметры свойства box-shadow:

• x-offset. html5book.ru Задаёт горизонтальное смещение тени. html5book.ru Положительное значение рисует тень, смещённую вправо от текста, отрицательная длина — влево. html5book.ru
• y-offset. html5book.ru Задаёт вертикальное смещение тени. html5book.ru Положительное значение смещает тень вниз, отрицательное — вверх. html5book.ru
• blur. html5book.ru Задаёт радиус размытия. html5book.ru Отрицательные значения не допускаются. html5book.ru Если значение размытия равно нулю, то край тени чёткий. html5book.ru В противном случае, чем больше значение, тем больше размыт край тени. html5book.ru
• растяжение. html5book.ru Задаёт расстояние, на которое тень увеличивается. html5book.ru Положительные значения заставляют тень расширяться во всех направлениях на указанный радиус. html5book.ru Отрицательные значения заставляют тень сжиматься. html5book.ru
• цвет. html5book.ru Задаёт цвет тени. html5book.ru Если цвет отсутствует, используемый цвет берётся из свойства color. html5book.ru