如何摆对姿势让前端工程师完美实现一个小阴影

2018-01-13

  先看一下代码(关注加粗字段即可,想体验效果可复制代码贴入记事本中,改变记事本文件格式txt为html,在浏览器中打开即可预览):

  微小的差别,前端没有像素眼没法很好看出你稿子的效果,但是在咱们这是万万使不得的!怎么办!怎么说!怎么跟前端大哥哥们坦诚以待,理直气壮的表达!

如何摆对姿势让前端工程师完美实现一个小阴影?爱彩秒速赛车

  所以,一个简单的代码可以实现很多效果,其实没事学习一下代码也是不错的,也便于与前端攻城狮们沟通,看着复杂的效果其实多写几行代码也就实现了,秒速赛车彩虹投影也不是不可以,姿势正确,分分钟搞定。

如何摆对姿势让前端工程师完美实现一个小阴影?爱彩秒速赛车

  web前端学习群:189394454,分享源码、视频、企业级案例、最新知识点,欢迎初学者和在进阶中的小伙伴。

  相信有朋友在项目验收UI的时候发现许多样式实现效果差强人意,经过项目后发现,许多都处在沟通的问题上面,在不熟悉代码的情况下与前端沟通页面问题有时候会非常吃力,并不是前端不配合,只是因为你不清楚他们的实现方式,他们也无法认真看你UI稿细节;在项目赶时间的情下,实现效果会更悲剧...所以这时候如果你能把一些看起来稍复杂的UI效果写成css代码的话那就无敌好了。

  box-shadow: 水平 垂直 模糊距离 阴影尺寸 模糊距离 颜色 外阴影改内阴影(inset) 如下图:

  下面这种写法是错误的,box-shadow写一次就行,所有数值写在同一个属性中即可,不然浏览器只是默认显示第一个

  一共五层,跟PS稿数值、层数一致,相信一般前端们是不会这么去写几层投影的(实际问过前端,看后直接说“有毛用这么多层-_______-`”),所以最好这种比较复杂的投影数值还是写出来的好,保证还原度。