分享三个弥散阴影的CSS代码片段

阴影的作用非常大,可以瞬间提升一个设计作品的质量。早起的实物阴影,后来的扁平化纯色阴影,到现在的弥散阴影,都有各自不同的特点,关于阴影的介绍可以读读下面两个链接:

https://www.uisdc.com/shadow-real-world-reflect-ui-design

https://www.uisdc.com/photoshop-diffusion-shadow-design

我分享三个我工作中常用到的三种弥散阴影类型代码片段。

 

小米官网的弥散阴影

分享三个弥散阴影的CSS代码片段

.hoverable {
    transition: box-shadow 0.3s;
    box-shadow: 0;
}
.hoverable:hover {
    transition: box-shadow 0.3s;
    box-shadow: 0 10px 20px 0 rgba(168, 182, 191, .6)!important;
}

 

一款精致的卡片阴影效果

分享三个弥散阴影的CSS代码片段

{
  box-shadow: 0 4px 23px 0 rgba(0,0,0,.09);
  border-radius: 5px;
}

 

首屏大面积阴影效果

分享三个弥散阴影的CSS代码片段

{
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .6);
}

 

分享