一些好用的CSS小小属性，拿下拿下！！

1. CSS writing-mode 属性

   • 它是用于垂直排版的语言，比如中文或者日文。然而，有趣的是如果我们把它用在英语中，可以很方便的创建垂直文本。（writing-mode 属性定义了文字在文文字块中垂直或者水平方向，参考MDN。）

   • horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
   • vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left 　　
   • vertical-lr：垂直方向内内容从上到下，水平方向从左到右
   • sideways-rl：内容垂直方向从上到下排列
   • sideways-lr：内容垂直方向从下到上排列
2. 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
3. clip-path 裁剪元素的可见范围（默认值：none;）
   • <clip-source>用 url() 引用 SVG 的 <clipPath> 元素
   • <basic-shape>一种形状，其大小和位置由 <geometry-box> 的值定义。如果没有指定 <geometry-box>，则将使用 border-box 用为参考框。取值可为以下值中的任意一个：
     • inset()定义一个 inset 矩形。
     • circle() 定义一个圆形（使用一个半径和一个圆心位置）。
     • ellipse() 定义一个椭圆（使用两个半径和一个圆心位置）。
     • polygon() 定义一个多边形（使用一个 SVG 填充规则和一组顶点）。
     • path() 定义一个任意形状（使用一个可选的 SVG 填充规则和一个 SVG 路径定义）。
   • <geometry-box>如果同 <basic-shape> 一起声明，它将为基本形状提供相应的参考框盒。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被 border-radius 定义的剪切路径）。几何框盒可以有以下的值中的一个
     • margin-box 使用 margin box 作为引用框。
     • border-box 使用 border box 作为引用框。
     • padding-box 使用 padding box 作为引用框。
     • content-box 使用 content box 作为引用框。
     • fill-box 利用对象边界框（object bounding box）作为引用框。
     • stroke-box 使用笔触边界框（stroke bounding box）作为引用框。
     • view-box 使用最近的 SVG 视口（viewport）作为引用框。如果 viewBox 属性被指定来为元素创建 SVG 视口，引用框将会被定位在坐标系的原点，引用框位于由 viewBox 属性建立的坐标系的原点，引用框的尺寸用来设置 viewBox 属性的宽高值。
4. perspective 添加透视距离
5. aspect-ratio 固定元素纵横比
   • 宽高比属性被指定为<ratio>值来代表 viewport 的宽高比。其为一个范围，这意味着你可以使用 min-aspect-ratio 和 max-aspect-ratio 分别查询最小和最大的值。

   •  

6. outline 添加输入框外层边框、 caret-colorv设置光标颜色
   • outline 不占据空间，绘制于元素内容周围。根据规范，outline 通常是矩形，但也可以是非矩形的。
   • 简写语法：和border属性一致。 eg: outline: green solid 3px;
   • 将 outline 设置为 0 或 none 会移除浏览器的默认聚焦样式。如果一个元素可交互，这个元素必须有一个可见的聚焦提示。若移除了默认聚焦样式，记得提供一个显眼的聚焦样式。

   • 

   •  

     caret-colorv 属性用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。 

7.  :is :where :not :has 伪类的使用
8. 通过track标签和kind=”captions”属性添加视频字幕，通过::cue 修改字幕样式
   
9. 待续。。。