иллюстрировать
Свойство box-shadow может добавить одну или несколько теней вокруг границы элемента. Определите несколько теней, разделенных запятыми.
грамматика
box-shadow: none | [inset? && [<offset-x> <offset-y> <blur-radius>? <spread-radius>? && <color>? ] ]
объяснять
none: значение по умолчанию — нет, что указывает на отсутствие тени.
inset:необязательный.将边框外阴影改为边框内阴影（即使是透明边框），背景之上内容之下。如果不写，默认为边框外阴影。 inset只可写在最前或者最后。
offset-x:Существенный.阴影水平方向的偏移量。 0，表示阴影在元素后面；正值，表示阴影在元素右边👉；负值，表示阴影在元素左边👈
offset-y:требуется. Вертикальное смещение тени. 0 означает, что тень находится за элементом, положительное значение означает, что тень находится под элементом☟, отрицательное значение означает, что тень находится над элементом☝
blur-radius:необязательный. Расстояние размытия тени.Это не допускает отрицательного значения. Если значение равно 0, края тени резкие, в противном случае, чем больше значение, тем сильнее размыты края тени.
spread-radius:необязательный. Значение по умолчанию равно 0, и в этом случае тень имеет тот же размер, что и элемент; при вертикальном положении тень расширяется во всех направлениях; при отрицательном значении тень сжимается в противоположном направлении.
color:необязательный. Если не указано, используйте цвет браузера по умолчанию — обычноcolorСтоимость имущества.
Например
Примечание. Следующие примеры не являются снимками экрана.
нормальные обстоятельства
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px blue'>css阴影</p>
css тень box-shadow: 15px 5px синий
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 10px blue'>css阴影</p>
css тень box-shadow: 15px 5px 10px синий
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 10px 5px blue'>css阴影</p>
css тень box-shadow: 15px 5px 10px 5px синий
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 0px 5px blue'>css阴影</p>
CSS Shadow Box-Shadow: 15PX 5PX 0PX 5PX Blue
Отрицательный (размытие-радиус не допускает отрицательного значения, остальные три могут быть)
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px -5px blue'>css阴影</p>
css тень box-shadow: 15px -5px синий
<p style='width:80%; border: 1px solid #ccc; box-shadow:-15px -5px blue'>css阴影</p>
css тень box-shadow:-15px -5px синий
<p style='width:80%; border: 1px solid #ccc; box-shadow:-15px 5px blue'>css阴影</p>
css тень box-shadow:-15px 5px синий
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 10px -5px blue'>css阴影</p>
css тень box-shadow: 15px 5px 10px -5px синий
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 0px -5px blue'>css阴影</p>
css тень box-shadow: 15px 5px 0px -5px синий
вставить внутреннюю тень
<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 5px blue'>css阴影</p>
css тень box-shadow: вставка 15px 5px синий
<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 5px 10px blue'>css阴影</p>
css тень box-shadow: вставка 15px 5px 10px синий
<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 5px 10px 5px blue'>css阴影</p>
css тень box-shadow: вставка 15px 5px 10px 5px синий
<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 5px 0px 5px blue'>css阴影</p>
css тень box-shadow: вставка 15px 5px 0px 5px синий
несколько теней
Для нескольких теней вес написан спереди, а вес перекрывающейся части тени — сверху.
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px blue, -15px -5px red'>css阴影</p>
CSS Shadow Box-Shadow: 15px 5px Blue, -15px -5px красный
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 0px 10px blue, -15px 0px 10px red, 0px 5px 10px yellow, 0px -5px 10px green '>css阴影</p>
css тень box-shadow: 15px 0px 10px синий, -15px 0px 10px красный, 0px 5px 10px желтый, 0px -5px 10px зеленый
<p style='width:80%; border: 1px solid #ccc; box-shadow:-15px -5px red inset,inset 15px 5px blue'>css阴影</p>
css shadow box-shadow: -15px -5px красная вставка, вставка 15px 5px синяя
<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 0px 10px blue, inset -15px 0px 10px red, inset 0px 5px 10px yellow, 0px -5px 10px green inset '>css阴影</p>
css тень box-shadow: вставка 15px 0px 10px синяя, вставка -15px 0px 10px красная, вставка 0px 5px 10px желтая, 0px -5px 10px зеленая вставка
Генерировать теневые значения онлайн
1: F12
Суммировать
Выше было выполнено основное использование. Более сложные сценарии должны быть хорошо написаны, если они понятны.
Просмотр информации, я также видел другой атрибутfilter:drop-shadow, также указывает на тени, но с отличием.Фильтр CSS3: фильтр drop-shadow применяется иначе, чем box-shadow