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

知识储备

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
上下也类似

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

对立两侧阴影


特殊的阴影

效果:


1
2
3

第一个例子展示一下代码
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()属性
缺点:当背景为透明时,如果字体设置了阴影,他会为阴影设置阴影,也就是阴影的阴影

这里绿色的是文字阴影,灰色是滤镜阴影


当我们不想要文字阴影时,用text-shadow是取消不了的。所以只有取消滤镜。真尴尬


让我们来看看box-shadow的效果,平衡一下

小箭头没阴影

总结:我们在设计一些小细节的可以用到阴影。这样的设计还是十分好看的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,205评论 0 11
  • text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS...
    arlene112阅读 2,295评论 0 1
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,337评论 0 11
  • 秋葵躺在温暖的被窝里,跟枕边人阿芒商量春节出去旅游的事。阿芒显得不太积极,说,再等等看,说不定儿子春节会回来呢。 ...
    千年老妖婆阅读 584评论 31 19
  • 发表于2010年12月8日 他说给我做过网站行不 我说我不会做网站啊 哦 他又说 那你给我写一首诗吧 ...
    邝鉴萍阅读 347评论 2 6