我想要得到这个效果:
到目前为止我有这个,但我不能让阴影正确,为什么大多数例子都有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>