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. 【Android】你知道还可以通过 View.animate() 来实现动画么
			
    这次想来讲讲 View.animate(),这是一种超好用的动画实现方式,用这种方式来实现常用的动画效果非常方便,但在某些场景下会有一个坑,所以这次就来梳理一下它的原理. 基础 首先,先来看一段代码: ...
    
			
    2. 
						
  2. 制作Linux登录欢迎界面
			
    1.登录提示语: 将提示语写入/etc/motd 文件 _ooOoo_ o8888888o 88" . "88 (| -_- |) O\ = /O ____/`---'\____  ...
    
			
    3. 
						
  3. Mybatis 常用标签
			
    MyBatis 的强大特性之一便是它的动态 SQL.如果你有使用 JDBC 或其他类似框架的经验,你就能体会到根据不同条件拼接 SQL 语句有多么痛苦.拼接的时候要确保不能忘了必要的空格,还要注意省掉 ...
    
			
    4. 
						
  4. web面试题
			
    1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
    
			
    5. 
						
  5. 第一次作业：我与CS的缘分
			
    "既然选择了远方,便只顾风雨兼程"   --汪国真 一.结缘计算机 1.1初识计算机 当第一次看到这个作业题目的时候,我的思虑不禁回到了小时候那个对这个世界的一切充满兴趣的纯真年代 ...
    
			
    6. 
						
  6. C语言第二次博客作业—分支结构
			
    一.PTA实验作业 题目1:计算分段函数 1.实验代码 double x,y; scanf("%lf",&x); if(x>=0){ y=sqrt(x); print ...
    
			
    7. 
						
  7. 【Alpha 阶段】后期测试及补充（第十一、十二周）
			
    [Alpha 阶段]动态成果展示 修复了一些bug后,关于游戏的一些动态图展示如下: 终极版需求规格说明书和代码规范 经过一些细微的图片和格式的调整,完成了本学期的最终版本: [markdown版说明 ...
    
			
    8. 
						
  8. Java的HelloWorld程序
			
    Java的HelloWorld程序 1.新建文本文档,编写HelloWorld程序,最后保存时记得保存成.java格式 2.在D盘新建一个HelloJava文件夹用于保存java程序 3.使用WIN+ ...
    
			
    9. 
						
  9. Django 个性化管理员站点
			
    from django.contrib import admin # Register your models here. from .models import Moment class Momen ...
    
			
    10. 
						
  10. Beta冲刺Day1
			
    项目进展 李明皇 今天解决的进度 点击首页list相应条目将信息传到详情页 明天安排 优化信息详情页布局 林翔 今天解决的进度 前后端连接成功 明天安排 开始微信前端+数据库写入 孙敏铭 今天解决的进 ...
    
			
    11.