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>On 我想要得到这个效果：

到目前为止我有这个,但我不能让阴影正确,为什么大多数例子都有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,.05),2px 2px 5px rgba(0,.1);  border-radius: 4px;  padding: 16px;  wIDth: 160px;}

<div>One</div><div>One</div><div>Three</div>

总结

以上是内存溢出为你收集整理的html – 使用css box-shadow属性给出div深度全部内容，希望文章能够帮你解决html – 使用css box-shadow属性给出div深度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。