html 给div设置阴影效果,html – 如何为div创建阴影效果[复制]

您唯一的选择是使用多个框阴影.但是,有一些限制：

>您必须使用半透明的颜色,因为它们会相互显示.

>您必须手动指定每个box-shadow属性,但您可以使用JS或CSS预处理语言(例如LESS或SASS)以编程方式执行此操作.

div {

background-color: steelblue;

box-shadow:

2px 2px 5px 0px #555,

4px 4px 5px 0px #555,

6px 6px 5px 0px #555,

8px 8px 5px 0px #555,

10px 10px 5px 0px #555,

12px 12px 5px 0px #555,

14px 14px 5px 0px #555,

16px 16px 5px 0px #555,

18px 18px 5px 0px #555,

20px 20px 5px 0px #555,

22px 22px 5px 0px #555,

24px 24px 5px 0px #555,

26px 26px 5px 0px #555,

28px 28px 5px 0px #555,

30px 30px 5px 0px #555,

34px 34px 5px 0px #555,

36px 36px 5px 0px #555;

width: 100px;

height: 100px;

}

您可以使用伪元素来设置阴影的不透明度：

>在父级上使用position：relative,并绝对定位伪元素

>通过将所有基数设置为0,强制伪元素与其父元素具有完全相同的维度

>将box-shadow属性应用于伪元素

>而不是更改背景颜色以使用rgba()通道,而是使用不透明度来控制透明度.

body {

background-color: yellow;

}

div {

background-color: steelblue;

width: 100px;

height: 100px;

position: relative;

}

div::before {

opacity: 0.25;

content: '';

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

box-shadow: 2px 2px 5px 0px #555, 4px 4px 5px 0px #555, 6px 6px 5px 0px #555, 8px 8px 5px 0px #555, 10px 10px 5px 0px #555, 12px 12px 5px 0px #555, 14px 14px 5px 0px #555, 16px 16px 5px 0px #555, 18px 18px 5px 0px #555, 20px 20px 5px 0px #555, 22px 22px 5px 0px #555, 24px 24px 5px 0px #555, 26px 26px 5px 0px #555, 28px 28px 5px 0px #555, 30px 30px 5px 0px #555, 34px 34px 5px 0px #555, 36px 36px 5px 0px #555;

}