CSS中的“微風中小草”是指CSS中常見的一種技巧，它可以在文本、圖標等元素周圍添加“小草”的效果，從而使其更具有立體感和生動性。

/* 微風中小草的實現 */
.element {
position: relative;
overflow: hidden; /* 超出部分隱藏 */
padding: 20px;
}
.element:before {
content: "";
position: absolute;
z-index: -1; /* 背景比內容層級低 */
top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
/* 上半部分添加漸變 */
transform: skewY(3deg);
/* 傾斜一定角度 */
}
.element:after {
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
/* 下半部分添加漸變 */
transform: skewY(-3deg);
}
/* 為了防止樣式影響到其他元素，可以添加一個類名 */
.green-grass {
background: #8de969; /* 懶得做跨瀏覽器兼容了 */
color: #fff;
font-size: 20px;
}

使用時，只需要在需要添加“微風中小草”的元素上添加一個類名即可：

<div class="element green-grass">
<p>這是一個有趣的標題</p>
<p>這是一段有趣的描述文字。</p>
</div>

結果如下：

“微風中小草”不僅可以應用在文本上，也可以應用在圖標等元素上，為網頁設計添加更多的細節和立體感。