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. MySQL数据库学习四 存储引擎和数据类型
			
    4.1存储引擎 1. 查看MySQL DBMS所支持的存储引擎 SHOW ENGINES;
    
			
    2. 
						
  2. V-bind详细使用
			
    v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url">& ...
    
			
    3. 
						
  3. 去除Vue在WebStorm中报命名空间的错误
			
    Preferences -> Editor -> Inspections找到XML,把 Unbound XML namespace prefix的勾去掉
    
			
    4. 
						
  4. 【Python】 文件目录比较工具filecmp和difflib
			
    在一些运维场景中,常常需要比较两个环境中的应用目录结构(是否有文件/目录层面上的增删)以及比较两个环境中同名文件内容的不同(即文件层面上的改).Python自带了两个内建模块可以很好地完成这个工作,f ...
    
			
    5. 
						
  5. PHP源代码加密
			
    加密软件(php_screw) >下载网站:http://sourceforge.net/projects/php-screw/ >描述:php文件通常以文本格式存贮在服务器端, 很容易被 ...
    
			
    6. 
						
  6. DotNetBar控件，superTabControl多文档界面（MDI）的风格、多Tab的创建方法
			
    最近在做一个条码系统的项目,第一次用dotnetbar控件,,查找资料时看到伍老师一篇文章(链接),但是没有关于加载tab窗口的方法,自己摸索做了一个此类风格出来,并写了一个通用方法,供大家参考. 风 ...
    
			
    7. 
						
  7. cisco交换机实现端口聚合
			
    0x00前言: 今天听老师讲端口聚合,为了方便日后复习故此有 了本篇随笔. 0x01准备工具: cisco模拟器 0x02:目录 为什么要用端口聚合? 广播风暴? 扩展:SMTP 0x03正文: 为什 ...
    
			
    8. 
						
  8. .net core2.0下Ioc容器Autofac使用
			
    .net core发布有一段时间了,最近两个月开始使用.net core2.0开发项目,大大小小遇到了一些问题.准备写个系列介绍一下是如何解决这些问题以及对应技术.先从IOC容器Autofac开始该系 ...
    
			
    9. 
						
  9. php的错误日志级别 error_report（转）
			
    ; E_ALL 所有错误和警告(除E_STRICT外); E_ERROR 致命的错误.脚本的执行被暂停.; E_RECOVERABLE_ERROR 大多数的致命错误.; E_WARNING 非致命的运 ...
    
			
    10. 
						
  10. 2018最新版本Sublime Text3注册码（仅供测试交流使用）
			
    -– BEGIN LICENSE -– TwitterInc 200 User License EA7E-890007 1D77F72E 390CDD93 4DCBA022 FAF60790 61AA ...
    
			
    11.