有些时候，为了页面的美观或一些效果的实现，我们需要通过阴影来突出立体感。
这分别是web浏览器和App中的效果。
由此可以看出，阴影的特点是有边框、逐渐变浅的颜色，可以有一个方向的偏移。
下面，来给大家分别介绍在html、ios和Android中的阴影如何实现。
一、html
参考代码：
<div style = 'margin:20px;padding:40px;text-align: center;
//为了适应各种浏览器和手机，要设置三个。#000是黑色，也可以改为其他颜色。
-webkit-box-shadow: #000 0px 0px 10px;
-moz-box-shadow: #000 0px 0px 10px;
box-shadow: #000 0px 0px 10px;
background: #FFFFFF;
behavior: url(/PIE.htc);'>实现很简单，没有特别需要注意的了。
二、ios
首先，说明一下注意事项。
在ios里面，我们通常要设置阴影的，可能是UIView或UIImageView。
看到我上面的图了吗？我开始时设置的是UiView的阴影，结果我的iphone6plus运行起来居然会卡顿！！仔细排查了一样，发现这样的问题：
如果给UIView设置阴影，就等于给UIView及其内部的所有元素设置了阴影！
这对于资源的消耗还是很大的。
所以，我改为在下面放置一个同样大小的UIImageView，然后给它设置了阴影。
参考代码：
_imageView.layer.shadowColor = [UIColor blackColor].CGColor;//shadowColor阴影颜色
_imageView.layer.shadowOffset = CGSizeMake(4,4);//shadowOffset阴影偏移,x向右偏移4，y向下偏移4，默认(0, -3),这个跟shadowRadius配合使用
_imageView.layer.shadowOpacity = 0.8;//阴影透明度，默认0
_imageView.layer.shadowRadius = 4;//阴影半径，默认3 三、Android
Android放到最后说，是因为Android居然最麻烦。
由于Android的阴影与SDK版本有点关系，我在这里说明一下我写这篇博文的Android SDK情况。
此时此刻，世面上的主流还是4.4.2,Android6.0的手机凤毛麟角，Android5.0有了一些，但也不算广泛。Android7.0还没有推出。
在这样的背景下，就一定要照顾4.4.2手机的效果了。
为什么说与SDK有关呢？
因为在SDK5.0开始，有一个简单设置阴影的办法。
——elevation
参考代码：
<TextView android:layout_width="100dp"
android:layout_margin="2dp"
android:layout_height="100dp"
android:text="test"
android:background="@android:color/white"
android:gravity="center"
android:elevation="4dip"/> 其实，elevation是设置的高度，也就是说，以前版本的控件，有width宽x、height高y（可以看为“长”），这个elevation是浮出来的高度z，因此，控件变为x、y、z三维的了。这个似乎是用来制作动画的。但设置了这个高度后，就产生了对底层的一个投影。高度越高，投影越长。而且这个投影随着屏幕的滑动，是有变化的。
elevation的好处就是简单。不好的地方，有版本要求；不能调整颜色。
那么介绍一下4.4.2如何制作阴影吧。
之前我也参考了一些网上的案例，通过style去重新画shape，如果大家有兴趣，可以在网上搜到一下案例。但我试了很多，完全达不到我上图的效果，最终放弃了。
我推荐的方法，是直接制作图片来作为背景。
其实，我本来是想避免这么做的，怕加载过多资源，但尝试之后，发现没什么影响。
好了，上传一下我做的图，已经用.9处理过。
制作的方法：
我是先用Fireworks做出来，然后切片为png，再用Android的.9工具。值得注意的是使用.9时右边和下边的线是设置展示区的。
给控件设置这个背景，就相当于加了一个边框。
需要注意的问题：
由于设置了.9，展示区外面（也就是有阴影的区域）是会遮盖内容的，因此要注意一下。