4-1 视觉效果篇阴影效果

2016-04-17 本文已影响428人 juicees

知识储备

1.box-shadow 向框添加一个或多个阴影
2.filter:drop-shadow() SVG滤镜
和box-shadow效果类似，但是没有模糊半径和inset选项

测试

单边阴影

用box-shadow来产生单边阴影

html

<div class="unilateral-shadow"></div>

css

.unilateral-shadow{ 
   width: 100px; 
   height: 80px;  
   margin: 0 auto; 

   background: orangered;  
   box-shadow: 0 5px 4px -4px black;
}

思考
首先我们要了解到有 阴影距离(第四个参数)可以是负的

于是有模糊距离+阴影距离=0 四侧的阴影都被隐藏了

最后我们将阴影向下移动5px ，使下部的阴影显示出来

相邻两边阴影
效果：

相邻两边阴影

html

<div class="two-adjacent-sides-shadow"></div>

css

.two-adjacent-sides-shadow{ 
   width: 100px;  
   height: 80px;  
   margin: 10px auto;   

   background: orangered;  
   box-shadow: 3px 3px 6px -3px black;
}

思考
公式：模糊距离+阴影距离+移动距离 = 结果

左侧阴影：6px+(-3px)-3px = 0
右侧阴影：6px+(-3px)+3px = 6px
上下也类似

其他：对立两侧阴影
效果：

对立两侧阴影

特殊的阴影

效果：

第一个例子展示一下代码
html

<div class="speech-bubble">Speech Bubble</div>

css

.speech-bubble{   
   width: 100px; 
   height: 100px;
   margin: 10px auto; 
   background: sandybrown;
   position: relative;
   border-radius: 5px; 
   text-align: center; 
   padding: 25px 0; 
   box-sizing: border-box;

   -webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,.5));
   filter: drop-shadow(2px 2px 2px rgba(0,0,0,.5));   
   /* 不合适的box-shadow */  
   /*box-shadow: 3px 3px 6px -3px black;*/
}
.speech-bubble::before{  
   content: '';  
   width: 20px; 
   height: 20px; 
   position: absolute; 
   right: -10px; 
   top: 20px; 
   transform: rotate(45deg);  
   background: inherit;
}

思考
这里应用了filter:drop-shadow()属性
缺点：当背景为透明时，如果字体设置了阴影，他会为阴影设置阴影，也就是阴影的阴影