前言
开启这个系列的原因主要是，很多设计师与技术沟通有障碍，对一些基础的网页样式代码、框架结构、动效很陌生，不利于前端快速开发。
其实设计师懂一些基础代码是很有必要的。pc网站、手机h5很多使用了 html+css，这是用来做web开发最常用最基本的技术，对设计师来说门槛很低、上手也很快。
实际上，在PS和Sketch中，我们做的一些效果已经可以直接导出css代码。
越来越多的UI设计师开始跟上潮流学习前端知识为自己充电。从本篇开始，我们将以html+css为例，一起了解下那些设计师经常用但又不明白怎么实现的效果，提高UI设计的效率。
box-shadow阴影
在UI界面中，投影或者叫阴影，是一个经常使用的效果，很多网站也都使用了投影效果。
有道精品课的商品hover效果
百度网盘的按钮投影
设计师做投影效果很简单，直接勾选投影样式，然后调节对应参数即可。
在Sketch中是这样的
设计师都很熟悉。阴影其实不用做切图处理，技术同学简单几个代码就可以搞定。
那么程序员用什么方法实现投影呢？
在css中这个投影叫做box-shadow，是给盒子（或者叫容器）增加投影的样式。它的属性代码是这样的：
和Sketch的展现基本一致，唯一不同的是，css颜色代码是放在最后的。
看到这里，大家会发现css和Sketch有着惊人的相似之处，其实Sketch中的各种属性基本上都可以导出对应的css代码，甚至可以说，Sketch是css的可视化设计工具。这也是为什么Sketch是目前最适合UI设计师使用的界面设计工具。
多重投影
在Sketch中，我们可以在一个矩形外面加多个投影，比如这样
css也能实现这样的效果，原理和sketch一模一样，就是在原先基础上去增加新的投影。
内部投影
以上是外部投影，投影出现在按钮的下面，有时候我们会根据需要添加按钮的内部投影，比如按钮高光效果。在sketch中投影和内部投影是分开的
在css中同样也有内部投影
只是在前面的例子中，我们没有写出来inset这个属性值，如果为空则表示默认外部阴影。同样内阴影也可以增加多个，方法和外阴影一样。
总结
以上就是阴影效果设计样式和css代码的区别和关系，实际上css的阴影还有一些更深层次的理论知识，跟设计师关系不太大，属于程序员的工作范畴。
Sketch和PS已经可以把简单的效果导出css样式，说明设计与技术正在紧密结合，甚至一定程度上可以互相转化。现在已经有一些插件可以把Sketch界面转化成html代码，随着技术进步，以后设计的页面不需要前端来切图，直接就可以变成网页，让我们拭目以待。
更多UI设计干货文章请关注UI黑客
微信公众号 uihacker
UI黑客官网http://www.uihacker.com/
UI黑客论坛http://bbs.uihacker.com/
