全文共1246字，預計學習時長5分鐘
圖源：unsplash
作爲web開發人員，CSS工具是必須掌握的。但是如果沒有遵從正確的學習流程，你可能很難理解CSS的操作。這也是一些開發者對其不甚明瞭的原因。
本文將通過兩種方式助你學習CSS：一是藉助專用工具對CSS進行編碼，二是通過一些交互環境學習CSS。
這些精選工具可一定要收藏好呀！
在線創造工具
1.EnjoyCSS
“EnjoyCSS是一款先進的CSS3生成器，用戶使用不受常規編碼的影響。”
EnjoyCSS是一款極易操作的工具，也是筆者費勁兒學習CSS時的救星。學習者可以使用簡單的UI設計元素，並提供相關的CSS輸出。
EnjoyCSS極大地改變了筆者的工作流程。由於易於使用，在創建複雜的CSS樣式時，它能節省時間和精力。你無需太多的專業知識就可以完成一個複雜的CSS。
圖源：chrome
2.CSSmatic
這款一體化的工具 包括以下4個工具:
· 噪聲紋理工具: 創建帶有髒像素和噪點的細微背景圖案，更改顏色和值，實時預覽結果
· 漸變生成工具: 使用多種顏色和不透明光圈生成驚豔的漸變
· 邊框圓角工具: 超級好用又省時，同時更改所有選定的邊框，實現需要的圓角效果
· 盒陰影工具: 無論是模糊半徑變化、顏色變化還是陰影大小——在單個位置創建完美陰影效果所需的功能都應有盡有
所有這些工具的UI都非常簡單且直觀，CSSmatic是一款必用的工具。
3.CSS Arrow Please!
此工具可幫你創建並導出自定義框的代碼，並可隨意調整該自定義框的箭頭方向。
儘管從頭開始編寫代碼聽起來很複雜，但它只需單擊幾下即可提供代碼。獲得代碼後，你就可以調試代碼並做些微調，例如添加陰影等。
圖源：pinterest
4. Patternizer和Patternify
通過這兩種工具，你可以在便於操作的界面中使用CSS創建出色的模式。藉助這些工具，可以創建出炫酷的操作模式，並輕鬆用於CSS直接編寫的網站上：
· Patternizer
· Patternify
在線學習工具
1.Flexplorer
這款簡單的應用程序允許學習者使用Flexbox的各種功能，並在屏幕上實時查看結果以及代碼。
學習者還可以編輯框中的文本，並查看框內佈局的響應情況。這種有趣的學習方式讓學習變得輕鬆又容易。
2.CSS Grid
該網站允許訪問者學習一門爲時四個小時的微型課程，瞭解CSS Grid的基礎知識。課程完全免費，創建者是著名的開發人員——韋斯·博斯（Wes Bos）。這門簡短的課程由25個視頻組成，教授CSS Grid的所有基本知識。
圖源：slideshare
3.Grid Garden
這款互動遊戲會敦促學習者編寫CSS代碼來種植胡蘿蔔園。這種有趣的學習方式可確保學習者瞭解CSS Grid的基礎知識。遊戲共有28個段位，每個段位都需要編寫CSS代碼段才能通關。
4.Image Effects with CSS
這款酷炫的工具是由Flexplorer的創建人班尼特·費利（Bennett Feely）所創建的。它非常實用，可以讓學習者通過使用CSS的屬性（例如background-blend-mode, mix-blend-mode和filter）來創建令人驚歎的圖像。該款工具使用混合和過濾功能來處理圖像。
以上介紹的CSS的工具對新手同樣友好~編碼愉快！
留言 點贊 關注
我們一起分享AI學習與發展的乾貨
歡迎關注全平臺AI垂類自媒體 “讀芯術”
（添加小編微信：dxsxbb，加入讀者圈，一起討論最新鮮的人工智能科技哦～）