css實現的一些視覺效果

投影

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>
    <img src="tiger.jpg" alt="Rawrrr!" />
</a>

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

毛玻璃效果

<div class="bg">
    <main>
      <blockquote>
        "The only way to get rid of a temptation[...]"
      </blockquote>
    </main>
</div>

.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);
}