本文介绍了Css3新特性应用之视觉效果，具体有单侧阴影、不规则投影、染色体效果、毛玻璃效果、折角效果，具体实现如下：
一、单侧阴影
1、box-shadow属性的应用，格式：h-shadow v-shadow blur spread color inset属性取值介绍 h-sahdow：水平阴影的位置，允许负值
①v-shadow：垂直阴影的位置，允许负值
②blur：模糊距离
③spread：阴影的尺寸，扩张距离，可以为负数
④color：阴影的颜色
⑤inset/outset：内部或者外部阴影
2、阴影的扩张距离对四边都有效，不能单独应用于单边。
3、box-shadow支持多组值同时生效的设置
示例代码：
.wrap{
width: 200px;
height: 120px;
background: yellowgreen;
box-shadow: 2px 0px 4px -2px black,
-2px 0px 4px -2px black;
}
二 、不规则投影
1、利用border-radius生成的形状，用投影很好，但是如果加入了伪元素和半透明的装饰，阴影表现就很不好了,如下情况都会有问题。
① 半透明图像、背景图像、或者border-image
②元素设置了点状、虚线或半透明的边框，但没有背景（或者background-clip不是border-box时）
③元素内部有小角是用伪元素生成
④通过clip-path生成的形状
解决办法：利用svg的drop-shadow来实现
示例代码：
.wrap{
width: 200px;
height: 120px;
border: 6px dotted yellowgreen;
--box-shadow: 0px 0px 4px 0px black;
-webkit-filter: drop-shadow(2px 0px 2px rgba(0,0,0,1))
}
三、染色体效果
1、基于滤镜实现,应用filter属性的相关值，调整图片的饱合度、亮度等值
2、基于min-blend-mode实现，作用：实现元素内容与背景以及下面的元素发生“混合”
3、基本background-blend-mode实现，作用：实现背景颜色与背景图片、背景图片与图片的混合
三种情况的示例代码：
.wrap1{
width: 200px;
height: 120px;
overflow: hidden;
}
.wrap1 > img{
max-height: 100%;
max-width: 100%;
-webkit-filter: sepia(1) saturate(4) hue-rotate(150deg);
} .wrap2{
width: 200px;
height: 120px;
background: hsl(335, 100%, 50%);
overflow: hidden;
}
.wrap2 > img{
height: 100%;
width: 100%;
mix-blend-mode: luminosity;
}
.wrap3{
width: 200px;
height: 120px;
background-size: cover;
background-color: hsl(335, 100%, 50%);
background-image: url("../img/cat.png");
background-blend-mode: luminosity;
}
