墨刀是一款設(shè)計(jì)協(xié)作軟件，可以幫助團(tuán)隊(duì)快速制作出漂亮的原型。其中，它的 CSS 功能十分強(qiáng)大，可以讓設(shè)計(jì)師用代碼的方式控制 UI 元素的樣式。下面，我們就來(lái)介紹一下墨刀 CSS 是如何工作的。

首先，打開(kāi)墨刀的編輯器，點(diǎn)擊右側(cè)的“CSS”標(biāo)簽，即可進(jìn)入 CSS 編輯器。在這里，我們可以看到一個(gè)“選擇器”欄、一個(gè)“屬性”欄和一個(gè)“屬性值”欄。

/* 選擇元素 */
.btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
/* 嵌套選擇器 */
.btn:hover {
background-color: #3e8e41;
}

通過(guò)在“選擇器”欄中輸入類名或 ID，可以指定要樣式化的元素。在“屬性”欄中，可以選擇要應(yīng)用的樣式屬性，例如背景顏色、字體大小和邊框樣式等。最后在“屬性值”欄中設(shè)置屬性的具體值，例如顏色代碼、像素值和 border 樣式等。

同時(shí)，CSS 編輯器支持嵌套選擇器，通過(guò)在選擇器后面添加：hover 或 :active，可以為元素添加鼠標(biāo)移入或點(diǎn)擊效果。例如，我們可以使用以下 CSS 代碼為按鈕添加懸浮效果：

/* 嵌套選擇器 */
.btn:hover {
background-color: #3e8e41;
}

總之，墨刀 CSS 是一種很便捷的 UI 設(shè)計(jì)方式，通過(guò)少量樣式代碼就可以添加豐富的樣式效果，十分適合團(tuán)隊(duì)快速原型制作。