视觉效果

1. 投影
2. 不规则投影
3. 染色效果
4. 毛玻璃效果
5. 折角效果

1 投影

box-shadow:水平偏移 垂直偏移 模糊距离 扩张半径 颜色 inset

单侧投影

css

.item1 {
    background:  #9198e5;
    box-shadow: 0 0 0 10px #000;
}
.item2 {
    background:  #9198e5;
    box-shadow: 0 10px 0 0  #000 ;
}
.item3 {
    background:  #9198e5;
    box-shadow: 0 10px 5px 0  #000 ;
}
.item4 {
    background:  #9198e5;
    box-shadow: 0 10px 5px -5px  #000 ;
}

box-shadow相当于一个底层的背景，可以根据x，y去移动，可以设置额外的模糊效果，第四个值可以理解为向内或向外扩张与收缩的半径

在单轴移动后，设置一个额外的模糊距离，再向内收缩相同的距离，就可以得到一个单侧阴影

邻边投影

.item1 {
    background:  #9198e5;
    box-shadow: 10px 10px 15px -10px  #000 ;
}
.item2 {
    background:  #9198e5;
    box-shadow: -10px -10px 15px -10px  #000 inset;
}

扩张半径可以决定实色显示的宽度

双侧投影

两个单侧投影叠加

.item1 {
    background:  #9198e5;
    box-shadow: 
        10px 0 5px -5px  #000 ,
        -10px 0 5px -5px  #000 ;
}

不规则投影

问题描述

对于前一章介绍的虚线边框、切角效果、裁剪路径在添加阴影时，会默认忽略透明部分或者无阴影效果

解决方案

滤镜：filter:drop-shadow()

.item1 {
    background:  #9198e5;
    position: relative;
    border-radius: 10px;
    box-shadow: 5px 5px 10px  #000;
}
.item1::before{
    content: '';
    position: absolute;
    top:20%;left: 100%;
    width: 10%;
    height: 20%;
    background: inherit;
    clip-path: polygon(0 0,100% 50%,0 100%);
}

.item2 {
    background:  #9198e5;
    position: relative;
    border-radius: 10px;
    filter: drop-shadow(5px 5px 10px  #000);
}
.item2::before{
    content: '';
    position: absolute;
    top:20%;left: 100%;
    width: 10%;
    height: 20%;
    background: inherit;
    clip-path: polygon(0 0,100% 50%,0 100%);
}
.item3{
    border:10px dashed #58a;
    box-shadow: 5px 5px 5px  #000;
}
.item4{
    border:10px dashed #58a;
    filter: drop-shadow(5px 5px 5px  #000);
}

效果

drop-shadow()没有扩展半径与inset，可以对任意非透明的部分添加阴影，背景透明的文字也会有阴影

3 染色效果

问题描述

为一幅灰度图片添加染色的效果，使用不同图片的切换会增加额外的HTTP请求，尝试对一张图片进行处理

基于滤镜的方案

单个滤镜不能实现，使用多滤镜组合的方式

.item1 {
    background: url(./img.png) 0 0 /100% 100%;
    filter: sepia(1);
}
.item2 {
    background: url(./img.png) 0 0 /100% 100%;
    filter:  saturate(4) ;
}
.item3 {
    background: url(./img.png) 0 0 /100% 100%;
    filter:  hue-rotate(295deg);
}
.item4 {
    background: url(./img.png) 0 0 /100% 100%;
    filter: sepia(1) saturate(4) hue-rotate(295deg);
}
.item4:hover,.item4:focus{
    filter: none;
}

• 深褐色 sepia()
• 饱和度saturate(4)
• 色相旋转 hue-rotate()

基于混合模式的方案

嵌套元素背景混合，单元素多背景混合

.item1 {
    background: hsl(335, 100%, 50%);
}
.item1 >img{
    width: inherit;
    height: inherit;
    mix-blend-mode: luminosity;
}
.item1:hover{
    background-color: transparent;
}
.item2{
    background:
        url(./img.png) 0 0 /100% 100%,
        hsl(335, 100%, 50%);
    background-blend-mode: luminosity;
}
.item2:hover{
    background-blend-mode: normal;
}

效果

4 毛玻璃效果

问题描述

.item1 {
    background: url(./img.png) center/ cover ;
}
.item1 main{
    background: hsla(0, 0%, 100%, .3);
}

.item2 {
    background: url(./img.png) center/ cover ;
}
.item2 main{
    background: hsla(0, 0%, 100%, .5);
}

.item3 {
    background: url(./img.png) center/ cover ;
    filter: blur(2px);
}
.item3 main{
    background: hsla(0, 0%, 100%, .5);
}

通过使用透明度来调节或者blur()滤镜都不能得到想要的效果，透明度过低内容不易突出，透明度过高与背景违和，blue()会直接使内容模糊

解决方案

使用background-attachment: fiexd，给子元素添加一个伪元素，背景与父元素背景一致，因为使用fixed，看上去是同一个背景

将伪元素置于子元素之下，父元素之上，这样就可以覆盖父元素实色背景又不遮挡子元素内容

给伪元素设置blur()，调节margin向外扩散，子元素设置overflow：hidden去除多余的模糊效果，可以调节子元素背景的透明度来实现不同的毛玻璃效果

css

.item1 {
    background: url(./img.png) 0/ cover fixed;
    z-index: -10;
}
.item1 main{
    position: relative;
}
.item1 main::before{
    content: '';
    position: absolute;
    top:0;right: 0;bottom: 0;left:0;
    background: rgba(255, 0, 0, .5);
    z-index: -1;
}

.item2 ,.item2 main::before{
    background: url(./img.png) 0/ cover fixed;
    z-index: -10;
}
.item2 main{
    position: relative;
    background: hsla(0, 0%, 100%,.1);
}
.item2 main::before{
    content: '';
    position: absolute;
    top:0;right: 0;bottom: 0;left:0;
    filter: blur(20px);
    z-index: -1;
}

.item3 ,.item3 main::before{
    background: url(./img.png) 0/ cover fixed;
    z-index: -10;
}
.item3 main{
    position: relative;
    background: hsla(0, 0%, 100%,.1);
    overflow: hidden;
}
.item3 main::before{
    content: '';
    position: absolute;
    top:0;right: 0;bottom: 0;left:0;
    filter: blur(20px);
    z-index: -1;
    margin: -30px;
}

效果

核心思想：在父元素与子元素之间加一个夹层，单独对这个夹层设置模糊

其他方法

backdrop-filter可以在元素的底层设置滤镜，不用夹层和固定背景就可以实现毛玻璃的效果，只设置元素的透明度即可

折角效果后续更新。。。