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. 不可思议的纯CSS导航栏下划线跟随效果
			
    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
    
			
    2. 
						
  2. linux --> Makefile编写
			
    Makefile编写 单目录 测试程序在同一个文件中,共有func.h.func.c.main.c三个文件,Makefile写法如下所示: CC = gcc CFLAGS = -g -Wall mai ...
    
			
    3. 
						
  3. Lucene 4.4.0中常用的几个分词器
			
    一.WhitespaceAnalyzer 以空格作为切词标准,不对语汇单元进行其他规范化处理.很明显这个实用英文,单词之间用空格. 二.SimpleAnalyzer 以非字母符来分割文本信息,并将语汇 ...
    
			
    4. 
						
  4. 小委出发vijos-1572 jdoj-1572
			
    小委出发 题目大意:一个长度为n的字符串,由()[]{}组成.求最长的和谐字符串:我们对最长和谐字符串的定义就是每一个括号有一个性质相同的括号与之匹配,这两个括号中间要么为空,要么也是和谐的.几个连续 ...
    
			
    5. 
						
  5. 优化的四个方面，缓存，表结构，索引，SQL语句
			
    一,缓存 数据库属于 IO 密集型的应用程序,其主要职责就是数据的管理及存储工作.而我们知道,从内存中读取一个数据库的时间是微秒级别,而从一块普通硬盘上读取一个IO是在毫秒级别,二者相差3个数量级.所 ...
    
			
    6. 
						
  6. 【HTTP协议】---HTTP协议详解
			
    HTTP协议详解 一.HTTP简介 1.HTTP协议,即超文本传输协议(Hypertext transfer protocol).是一种详细规定了浏览器和万维网(WWW = World Wide We ...
    
			
    7. 
						
  7. 【数据结构】赫夫曼树的实现和模拟压缩(C++)
			
    赫夫曼(Huffman)树,由发明它的人物命名,又称最优树,是一类带权路径最短的二叉树,主要用于数据压缩传输. 赫夫曼树的构造过程相对比较简单,要理解赫夫曼数,要先了解赫夫曼编码. 对一组出现频率不同 ...
    
			
    8. 
						
  8. ＮＳＲＣ技术分享——自制Linux Rootkit检测工具
			
    ### 前言 Linux系统中存在用户态与内核态,当用户态的进程需要申请某些系统资源时便会发起系统调用.而内核态如何将系统的相关信息实时反馈给用户态呢,便是通过proc文件系统.如此便营造了一个相对隔 ...
    
			
    9. 
						
  9. Mac下安装virtualenv, 并在PyCharm中使用
			
    今天在安装一个leader写的package的时候,同事建议安装到虚拟环境中,再在PyCharm里使用该虚拟环境即可.此处记录下经过: 开发Python应用的时候,有时会遇到不同的Python应用依赖 ...
    
			
    10. 
						
  10. css3控制div上下跳动-效果图
			
    效果图演示,源代码    
    
			
    11.