Chapter 4

1. 单侧投影

为元素设置投影可以使用 box-shadow 属性，指定三个长度值（X轴偏移量、Y轴偏移、模糊半径）与一个颜色值

要想只在底部设置投影，需要用到第四个参数：投影的扩张半径，如果该值为负，就代表缩小投影尺寸

box-shadow: 0 2px 4px black;  //即使设置X轴偏移量为0，两侧还会有轻微的投影

box-shadow: 0 5px 5px -5px black，

　　　　　　　 0 -5px 5px -5px blue; //通过逗号分隔，单独设置各边投影

此外，还可以通过 filter：drop-shadow（）；为不规则图形添加投影

2. 染色效果

鼠标聚焦到图像上可以是图片颜色更改或者复原，是现在网页很常见的一种操作，看起来也很炫

可以把多个滤镜组合起来实现

 <img src="342.png">

------------------------------

img {

    width: 400px;

    height: 300px;

    transition: 0.5s filter; //过渡动画效果

    filter: sepia(1);  //降低色相值

          ：saturate,  //提升像素饱和度

          ：hue-rotate

}

img:hover,

img:focus{

    filter:none;

}

     

3. 毛玻璃效果

这种效果现在在手机系统下拉菜单经常看到，或者 iPhone 的 siri 界面，都是毛玻璃效果

通常可以通过调整div背景透明度做效果，但这样并不是毛玻璃效果，真正的毛玻璃效果需要用伪元素来实现，在要加背景的元素底部放一个伪元素，然后对这个伪元素进行模糊处理即可

<body>
<main>

<blockquote>“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”</em>

<footer>— <cite>Oscar Wilde, The Picture of Dorian Gray</cite></footer>

</blockquote>

</main>
<body>


body, main::before {

	background: url("http://csssecrets.io/images/tiger.jpg") 0 / cover fixed;
}


main {

    position: relative;

    margin: 0 auto;

    padding: 1em;

    max-width: 23em;

    background: hsla(0,0%,100%,.25) border-box;

    overflow: hidden;   //裁去多余的模糊效果

    border-radius: .3em;

    box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,

                0 .5em 1em rgba(0, 0, 0, 0.6);

    text-shadow: 0 1px 1px hsla(0,0%,100%,.3);

}

main::before {

    content: '';

    position: absolute;

    top: 0; right: 0; bottom: 0; left: 0;
    margin: -30px;

    z-index: -1;      //放到main的下层

    filter: blur(20px);

}




												


											
CSS揭秘（四）视觉效果的更多相关文章
	

    
						
  1. [CSS]《CSS揭秘》第四章——视觉效果
		
    投影 单侧投影 box-shadow:0px 10px 10px -5px black; 邻边投影 box-shadow:10px 10px 10px 2px black; 双侧投影 box-shad ...
    
		
    2. 
						
  2. [css 揭秘]：CSS揭秘 技巧（四）：边框内圆角
		
    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 边框内圆角 问题:有时候我们需要一个容器,只在内侧有圆角,而 ...
    
		
    3. 
						
  3. CSS揭秘—打字动效（四）
		
    前言:     所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但 ...
    
		
    4. 
						
  4. css 揭秘-读书笔记
		
    css 揭秘 [希]Lea verou 著 css 魔法 译 该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...
    
		
    5. 
						
  5. CSS揭秘读书笔记	（一）
		
    CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background: ...
    
		
    6. 
						
  6. [css 揭秘]：CSS揭秘 技巧（二）：多重边框
		
    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...
    
		
    7. 
						
  7. CSS揭秘—多重边框（二）
		
    前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...
    
		
    8. 
						
  8. 《CSS揭秘》笔记（一）
		
    前言 我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...
    
		
    9. 
						
  9. CSS揭秘之多重边框&连续的图像边框
		
    1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更好的办法来制作一个多重边框,那就是使用box-shadow的第四个参数(称为扩张半径) ...
    
		
    10. 
						
  10. 《CSS 揭秘》作者Lea Verou：我喜欢分享开源的行业文化
		
    本文仅用于学习和交流,不用于商业目的.非商业转载请注明作译者.出处,并保留本文的原始链接:http://www.ituring.com.cn/art... 访谈嘉宾: Lea VerouW3C CSS ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. New FileReader上传图片
			
    function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader() ...
    
			
    2. 
						
  2. Java DualPivotQuickSort 双轴快速排序 源码 笔记
			
    DualPivotQuicksort source code 这个算法是Arrays.java中给基本类型的数据排序使用的具体实现.它针对每种基本类型都做了实现,实现的方式有稍微的差异,但是思路都是相 ...
    
			
    3. 
						
  3. Android一个小巧的记录app（便签或者日记   随心）
			
    入驻博客园两个月今天第一次发随笔,,话不多说,直接上图展示效果 主界面用的RecyclerView的瀑布流(StaggeredGridLayoutManager),同时加上Floatbutton悬浮按 ...
    
			
    4. 
						
  4. Python中安装模块的方法
			
    1.*nix系统上有一个地方专门有一个地方来放置安装的Python模块 比如在Mac上,这个目录的路径为: /usr/lib/python2.7 将要安装的文件拷贝到这里即可 2.下载模块包,解压后, ...
    
			
    5. 
						
  5. Java虚拟机之性能监控
			
    一.jstat:虚拟机统计信息监控工具监视虚拟机各种运行状态 图中,S0.S1(Survivor0.Survivor1)代表两个Survivor区,其中一个值为57.60%.另一个为0.E(Eden) ...
    
			
    6. 
						
  6. 关于C语言的第0次作业
			
    1.你认为大学的学习生活.同学关系.师生关系应该是怎样的?请一个个展开描述. 我认为的大学学习生活是充实的,丰富多彩的,与高中快节奏.繁忙的生活有所不同.在上了大学我们都成熟了很多,懂得了包容与忍让, ...
    
			
    7. 
						
  7. 201621123040《Java程序设计》第12周学习总结
			
    1.本周学习总结 2.面向系统综合设计-图书馆管理系统或购物车 2.1简述如何使用流与文件改造你的系统.文件中数据的格式如何? 将书目信息写入文件,查阅图书馆书目信息时,实现文件的读取 2.2简述系统 ...
    
			
    8. 
						
  8. 20162318 实验三《 敏捷开发与XP实践》实验报告
			
    北京电子科技学院(BESTI) 实 验 报 告 课程:程序设计与数据结构 班级:1623班 姓名:张泰毓 指导老师:娄老师.王老师 实验日期:2017年5月12日 实验密级:非密级 实验器材:带Lin ...
    
			
    9. 
						
  9. jQuery函数学习
			
    函数:after(content) 功能:在每个匹配的元素后面添加html内容 返回:jQuery对象 参数:content (<Content>): Content to insert  ...
    
			
    10. 
						
  10. tableView//collectionView加载时的动画
			
    - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:( ...
    
			
    11.