- CSS writing-mode 属性
-
它是用于垂直排版的语言，比如中文或者日文。然而，有趣的是如果我们把它用在英语中，可以很方便的创建垂直文本。（writing-mode 属性定义了文字在文文字块中垂直或者水平方向，参考MDN。）
- horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
- vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
- vertical-lr：垂直方向内内容从上到下，水平方向从左到右
- sideways-rl：内容垂直方向从上到下排列
- sideways-lr：内容垂直方向从下到上排列
-
- CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。
- 说到对图片进行处理，我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图标显示不同的颜色。或者是hover的时候，对图片的对比度，阴影进行处理。
- filter: none ：没有效果，属性的默认值
- blur() ：给图像一个高斯模糊效果，length值越大，图像越模糊，eg:filter:blur(6px)
- brightness() : 线性乘法,可以让图片看起来更亮或者更暗，eg:filter:brightness(70%);
- contrast()：调整图像的对比度，eg:filter:contrast(50%);
- drop-shadow()：给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速，利用这个方案，我们其实改变类似于一些图标的颜色，比如黑色的图标变成蓝色的图标。eg:filter: drop-shadow(705px00#ccc);
- grayscale()：图片灰度设置,这个效果可以将图片做旧，有一种时代沧桑感。喜欢古风的人一定会喜欢上这个效果的,eg：filter:grayscale(80%);(除了古风还有一种用法是有的时候需要将全站变成灰色，如大屠杀纪念日的时候。具体css编写如下：*{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); })
- hue-rotate()：色相反转，eg:filter:hue-rotate(70deg);
- invert()：这个函数的作用是反转输入图像，有点像曝光的效果，eg:filter:invert(100%)
- opacity()
- saturate()
- sepia()：将图像转换为深褐色，eg：filter:sepia(50%)
- url()：**filter:url()就是css滤镜改变图片的终极方法。CSS:filter可以导入一个svg滤镜，作为他自己的滤镜。
- 原文链接：https://juejin.cn/post/6844903682010513415
- 后续待补充...