投影

1.单侧投影

思路是box-shadow 的第四个长度参数。它排在模糊半径参数之后，称作扩张半径。这个参数会根据你指定的值去扩大或当指定负值时，缩小投影的尺寸。例如，一个-5px 的扩张半径会把投影的宽度和高度各减少10px（即每边各5px）。

box-shadow: 0 5px 4px -4px black;

2.邻边投影

box-shadow: 3px 3px 6px -3px black;

3.双侧投影

用两块投影（每边各一块）来实现

box-shadow: 5px 0 5px -5px black,            -5px 0 5px -5px black;

不规则投影

解决办法是使用滤镜效果，filter。值有很多，比如blur()、grayscale() 以及drop-shadow()等。

实现不规则投影使用的是drop-shadow

filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

注：drop-shadow会给任何非透明的部分打上投影，包括文本。如果文本设置了text-shadow，就是投影的投影。

染色效果

方案一：

为了解决给图片加一层统一的渲染风格，使用filter滤镜，并且需要将一些滤镜的值叠加使用。

sepia滤镜，它会给图片增加一种降饱和度的橙黄色染色效果。

saturate滤镜，给每个像素提升饱和度hue-rotate滤镜，把每个像素的色相以指定的度数进行偏移

filter: sepia(1) saturate(4) hue-rotate(295deg);

原图：

方案二：

基于混合模式的方案。mix-blendmode可以为整个元素设置混合模式。background-blend-mode 可以为每层背景单独指定混合模式。

实现方式：

a {    background: hsl(335, 100%, 50%);}img {    mix-blend-mode: luminosity;}

毛玻璃效果

    
    
     
      
      
               "The only way to get rid of a temptation[...]"      
      
    
     
    

.bg {  width: 500px;  height: 300px;  background: url("dog.jpg");  background-size: cover;}main {  position: relative;  background: hsla(0, 0%, 100%, .3);  overflow: hidden;}main::before {  content: '';  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  filter: blur(20px);  margin: -30px;}

折角效果

45°折角的解决方案

增加一个暗色的三角形来实现翻折效果。实现方法是增加另一层渐变来生成这个三角形并将其定位在右上角，这样就可以通过background-size 来控制折角的大小。

div {    background: #58a; /* 回退样式 */    background:    linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,    linear-gradient(-135deg, transparent 1.5em, #58a 0);}