css揭秘|第四章：视觉效果

date

Apr 11, 2021

slug

css-secrets-ch4

status

Published

单侧投影

只有下侧有投影

只有左侧有投影

只有右侧有投影

只有上侧有投影

邻边投影

双侧投影

其实就是把单侧投影叠加

不规则投影

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

box-shadow: 2px 2px 10px rgba(0,0,0,0.5)可以写成这样filter: drop-shadow(2px 2px 10px rgba(0,0,0,0.5))

可以适配不规则的形状

染色效果

为一-幅灰度图片(或是被转换为灰度模式的彩色图片)增加染色效果 (color tint)，是一种流行且优雅的方式，可以给- -系列风格迥异的照片带来视觉上的一致性。我们通常会在静止状态下应用这个效果，当发生:hover或其他交互时再去除。

HSL即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。HSV即色相、饱和度、明度（英语：Hue, Saturation, Value），又称HSB，其中B即英语：Brightness。
色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
明度（V），亮度（L），取0-100%。 ----wiki