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. Spring Boot 1.4测试的改进
			
    对Pivotal团队来说,工作上的好事情是他们拥有一个被叫做Pivotal Labs的灵活发展部门,拥有Labs团队的Lean 和 XP程序设计方法学的强大支持,例如结对编程和测试驱动开发.他们对于测 ...
    
			
    2. 
						
  2. Ubuntu上安装和使用RabbitMQ
			
    1. 安装RabbitMQ服务软件包 输入以下命令进行安装 #apt install rabbitmq-server 2.安装完成后在rabbitMQ中添加用户 命令:#rabbitmqctl add ...
    
			
    3. 
						
  3. iOS 跑马灯带图片可点击
			
    项目中有个需求,需要以跑马灯的形势滚动展示用户的实时数据,跑马灯需要有用户头像,内容的长度不固定,并且可以点击,滚动效果还要足够流畅,本着不重复造轮子的心理,在网上各种搜索,发现都没法找到满足需求的d ...
    
			
    4. 
						
  4. 小委出发vijos-1572 jdoj-1572
			
    小委出发 题目大意:一个长度为n的字符串,由()[]{}组成.求最长的和谐字符串:我们对最长和谐字符串的定义就是每一个括号有一个性质相同的括号与之匹配,这两个括号中间要么为空,要么也是和谐的.几个连续 ...
    
			
    5. 
						
  5. css3 背景色 实现边框渐变运动动画
			
    css3 #body_id { animation: myfirst 10s ease-in-out -2s infinite alternate; /* Firefox: */ -moz-anima ...
    
			
    6. 
						
  6. 转载：lua中switch
			
    刚开始使用lua的人肯定会不满lua居然没有switch这个语法. 但是熟悉lua的强大特性之后,你会发现其实switch是完全没有必要提供的^.^,因为lua有强大的table和function 例 ...
    
			
    7. 
						
  7. vue 源码学习----build/config.js
			
    1. process 这个process是什么?为何都没有引入就可以使用了呢? process 对象是一个 global (全局变量),提供有关信息,控制当前 Node.js 进程.作为一个对象,它对 ...
    
			
    8. 
						
  8. JavaScript(第三十三天)【总结：封装基础前端框架】
			
    源码地址:https://github.com/whisper540/Base
    
			
    9. 
						
  9. g第十四周，十五周作业
			
    1.数组中偶数的和 #include <stdio.h> int main(){ ; ]; ;i<=;i++) { scanf("%d ",&a[i]); ...
    
			
    10. 
						
  10. c语言——第0次作业
			
    1.你认为大学的学习生活.同学关系.师生应该是怎样?请一个个展开描写 大学生活:大学生活充满着挑战,首先当然必须先掌握自己所学的专业知识,然后就要学会独立,可以处理好人际关系,并且要有更强的自我约束能 ...
    
			
    11.