以下の2編をお勧めします.7、8、8を学ぶことができます.

1.CSSデザインマニュアル学習ノート1

2.CSS設計マニュアル学習ノート2

現在、まだ欠けている内容は以下の通りです.
ブロックレベル、およびオーバーフロー.
calc、式を計算します.
BEMのCSSネーミング方式学習リンクEmmetクイックコーディングリンク補完リンク2 max-height,max-width
transition,transform,
color,text-decoration,text-transform,
keyframes(AnimationName),
touch-action,cursor,user-select,
::after擬似要素のcontentはattrを採用します.
特殊効果の例:
下向きの点線効果.process-3:before { content: ''; position: absolute; height: 100%; width: 1px; left: 1.85714286em; top: 0; border-left: 1px dashed #ddd; } 文字は画像による背景効果.mining-text, .mining-normal-text, .mining-turbo-text { line-height: 3em; background: linear-gradient(to bottom, #cfc09f 22%,#634f2c 24%, #cfc09f 26%, #cfc09f 37%,#ffecb3 50%,#3a2c0f 98%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #fff; position: relative; text-transform: uppercase; margin: 0; font-size: 2.8em; font-weight: 600; } 問題ライブラリの例:
面白いCSSテーマ(16):奇妙なbackground-clip:text 面白いCSS題目(1):左の縦棒の実現方法面白いCSSテーマ(9):CSS斜線を巧みに実現
HTML+CSS昇格小実戦html-css練習問題(システムヒント、ダイアログボックス)CSS試験問題HTML+CSSの練習のネット上の書城ホームページ面の実現15個の実用的なCSSオンラインインスタンスチュートリアルCSSウェブページ作成:興味深いケース分析純CSS 3、ダイナミック効果を実現し、合集を実現する.
つの面白い練習CSSセレクタのウェブサイトを推薦します:を推薦します
茫然、一歩一歩、CSSセレクタに精通したゲームまで
CSSインスタンスCSSテスト