From c1fbb993933151d6cbc554b3a838d708443b4f2c Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Tue, 6 Dec 2022 11:42:01 +0800
Subject: [PATCH] doc: update css.md

---
 docs/css.md | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/docs/css.md b/docs/css.md
index 1a985db0..4ae148bf 100644
--- a/docs/css.md
+++ b/docs/css.md
@@ -1487,6 +1487,7 @@ br + br {
 ```
 
 ### CSS 重置
+<!--rehype:wrap-class=row-span-2-->
 
 ```css
 html {
@@ -1501,6 +1502,25 @@ html {
 
 有助于在不同的浏览器之间强制样式一致性，并为样式元素提供干净的盒子
 
+### 设置光标样式
+
+```css
+body {
+  caret-color: red;
+}
+```
+
+### 设置整个页面灰色
+<!--rehype:wrap-style=-webkit-filter: grayscale(.95);-->
+
+```css
+html {
+  -webkit-filter: grayscale(.95);
+}
+```
+
+上面示例设置了当前卡片灰色
+
 ### 使用图像作为光标
 
 ```css
@@ -1632,14 +1652,6 @@ div {
 
 属性 [aspect-ratio](https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio) 可以非常容易的定义一个容器的长宽比
 
-### 设置光标样式
-
-```css
-body {
-  caret-color: red;
-}
-```
-
 另见
 ---------