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

概述参见英文答案 > 3D Box Shadow effect                                    6个 如何使用css在图片中设置阴影？ Here a better drawing http://www.sumoware.com/images/temp/xzxmrkknxgcgmgfn.png 这是我目前的css代码 div{ -webkit-box-sha 参见英文答案 > 3D Box Shadow effect                                    6个
如何使用CSS在图片中设置阴影？

Here a better drawing http://www.sumoware.com/images/temp/xzxmrkknxgcgmgfn.png

这是我目前的CSS代码

div{    -webkit-Box-shadow: 76px 50px 5px 0px rgba(0,0.75);    -moz-Box-shadow: 76px 50px 5px 0px rgba(0,0.75);    Box-shadow: 76px 50px 5px 0px rgba(0,0.75);}}

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

>您必须使用半透明的颜色,因为它们会相互显示.
>您必须手动指定每个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;}

<div></div>

我还使用SCSS做了一个例子：http://codepen.io/anon/pen/WvELEv

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

>在父级上使用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,36px 36px 5px 0px #555;}

<div></div>

总结

以上是内存溢出为你收集整理的html – 如何为div创建阴影效果[复制]全部内容，希望文章能够帮你解决html – 如何为div创建阴影效果[复制]所遇到的程序开发问题。

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