html – 使用css box-shadow属性给出div深度

我想要得到这个效果:

《html – 使用css box-shadow属性给出div深度》

到目前为止我有这个,但我不能让阴影正确,为什么大多数例子都有rgb而不是十六进制?

div {
  margin: 16px 0;
  box-shadow: 2px 2px 5px #E6E6E6, 0px 0px 0px #E6E6E6, 0px 0px 0px #E6E6E6;
  border-radius: 4px;
}
<div>One</div>
<div>One</div>
<div>Three</div>

最佳答案 使用RGBA颜色更常见于箱阴影的原因是因为它会与背景很好地融合.通过使用颜色,当盒阴影颜色的亮度比背景更高(即更亮)时,最终可能会产生“发光”效果.

为了达到你想要达到的效果,它实际上非常简单:

>你使用一个完全没有偏移的普通盒子阴影,给所有4个边缘带来某种阴影
>使用偏移几个像素的第二个盒子阴影,给出阴影的方向性,然后给出深度效果

激烈的不透明度主要是一种反复试验的事情.请参阅下面的概念验证:

div {
  margin: 16px 0;
  box-shadow: 0 0 5px rgba(0,0,0,.05), 2px 2px 5px rgba(0,0,0,.1);
  border-radius: 4px;
  padding: 16px;
  width: 160px;
}
<div>One</div>
<div>One</div>
<div>Three</div>
点赞