投影知识点box-shadow:[inset]?注意：元素正下方的投影被截掉了，没有；和text-shadow不同的是，文字下方的投影不会被裁切。box-shadow的第三个参数是模糊半径。如果设置为4px，则投影大小比元素本身大8px。box-shadow的第四个参数是扩展半径。指定整数为扩大，负数为缩小。单面投影box-shadow:010px8px-8pxblack;相邻侧投影box-shadow:6px6px12px-6pxblack;双面投影box-shadow无法指定水平或垂直方向的放大或缩小，所以只能使用两层投影来达到目的。框阴影：6px012px-6px黑色，-6px012px-6px黑色；不规则投影box-shadow非常适合用border-radius生成的矩形或形状，但它非常适合除此之外的形状，它将不起作用。例如：border:10pxdashedorange;盒子阴影：2px2px3pxrgba(0,0,0,.5);可以使用新的css属性filter，使用一些函数，比如blur()、grayscale()、drop-shadow()等，就可以达到想要的效果。drop-shadow()的参数与box-shadow相同，只是没有扩展半径和关键字inset，但不支持逗号分隔的多层投影语法。边框：10px橙色虚线；过滤器：阴影（2px2px3pxrgba（0,0,0,.5））;背景：线性渐变（45deg，透明20px，橙色0）左下角/50％，线性渐变（-45deg，透明20px,orange0)rightbottom/50%,linear-gradient(135deg,transparent20px,orange0)lefttop/50%,linear-gradient(-135deg,transparent20px,orange0)righttop/50%;背景-重复：不重复；滤镜：阴影（2px2px5pxrgba（0,0,0,.5））；.talkbox{背景色：橙色；边界半径：20px；位置：相对；过滤器：阴影（2px2px3pxrgba（0,0,0,.5））;}.talkbox::after{content:'';显示：块；框大小：边框框；宽度：50px；高度：50px；左边框：25px纯橙色；border-top:25px实心透明；border-bottom:25px实心透明；位置：绝对；顶部：25%；left:100%;}需要注意的是，任何非透明的部分都会被drop-shadow()打上投影。（这不是很好的体验）颜色：橙色；边框：10px实心；文本阴影：2px2px黄绿色；过滤器：阴影（2px2px2px黑色）；着色效果使用滤镜为图片添加滤镜效果。主要用到了sepia()、saturate()、hue-rotate()等函数。原图sepia()去饱和橙黄色染色效果saturate()增加饱和度hue-rotate()抵消每个像素的色调，如果是粉色就可以过度动画。最终的代码是.filter-img{transition:.5sfilter;过滤器：棕褐色（.5）饱和（4）色调旋转（295deg）；}.filter-img:hover,.filter-img:focus{过滤器：无；}混合模式方案为了避免上面滤镜方式的淡化和不自然效果，还可以使用“混合模式”，它控制上层元素的颜色和下层元素的颜色混合的方式。染色的混合模式是luminosity，保留了上层元素的hsl高光信息，吸收了下层的色相和饱和度信息。具体来说，可以分为两种方式。方法一：
