視頻示範：如何用CSS 創作一顆逼真的土星 ？（附代碼）

效果預覽

按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點選連結可以全屏預覽。

https://codepen.io/comehope/pen/EpbaQX

可互動視頻

此視頻是可以互動的，你可以隨時暫停視頻，編輯視頻中的代碼。

請用 chrome, safari, edge 開啟觀看。

https://scrimba.com/p/pEgDAM/cBdyeTw

代碼解讀

定義 dom，容器本身表示土星星球，其中的 ring 元素表示土星環：

<p class="saturn">        <span class="rings"></span>    </p>

置中顯示：

body {    margin: 0;    height: 100vh;    display: flex;    align-items: center;    justify-content: center;    background-color: black;}

定義容器尺寸：

.saturn {    width: 20em;    height: 20em;    font-size: 20px;}

畫出土星星球（此為草稿，後面還會細化）：

.saturn {    position: relative;}.saturn::before,.saturn::after {    content: '';    position: absolute;    width: 9em;    height: 9em;    background: linear-gradient(        palegoldenrod 0%,        tan 10%,        burlywood 30%,        palegoldenrod 60%,        darkgray 100%    );    border-radius: 50%;    left: calc((20em - 9em) / 2);    top: calc((20em - 9em) / 2);}

畫出土星環（此為草稿，後面還會細化）：

.rings {    position: absolute;    width: inherit;    height: inherit;    background: radial-gradient(        transparent 35%,        dimgray 40%,        slategray 50%,        transparent 60%,        dimgray 60%,        slategray 70%,        transparent 70%    );}

改變觀察土星環的視角：

.rings {    transform: rotateX(75deg);}

為了使土星呈現被土星環環繞的效果，把土星分為上下兩半，使它們和土星環的圖層順序從底到頂依次為：星球的下半部、土星環、星球的上半部：

.saturn::before {    clip-path: inset(50% 0 0 0);}.saturn::after {    clip-path: inset(0 0 50% 0);}

至此，畫出了土星的整體結構，接下來完善細節。
為土星環塗上豐富的漸層色：

.rings {    background: radial-gradient(        rgba(24,19,25,0) 0%,        rgba(53,52,51,0) 34%,        rgba(55,54,52,1) 36%,        rgba(56,55,53,1) 37%,        rgba(68,67,66,1) 38%,        rgba(56,55,53,1) 39%,        rgba(68,67,66,1) 40%,        rgba(56,55,53,1) 41%,        rgba(87,77,76,1) 42%,        rgba(87,77,76,1) 44%,        rgba(113,110,103,1) 46%,        rgba(113,110,103,1) 48%,        rgba(113,98,93,1) 49%,        rgba(113,98,93,1) 51%,        rgba(122,115,105,1) 52%,        rgba(113,98,93,1) 53%,        rgba(113,98,93,1) 54%,        rgba(122,115,105,1) 55%,        rgba(106,99,89,1) 56%,        rgba(106,99,89,1) 58%,        rgba(79,76,76,0) 60%,        rgba(65,64,70,1) 61%,        rgba(65,64,70,1) 62%,        rgba(90,85,89,1) 63%,        rgba(78,74,73,1) 65%,        rgba(78,73,74,1) 67%,        rgba(78,73,74,0) 68%,        rgba(78,73,75,1) 69%,        rgba(78,73,75,1) 70%,        rgba(78,73,76,0) 71%,        rgba(77,72,76,0) 72%,        rgba(24,19,25,0) 100%    );}

為星球塗上豐富的漸層色：

.saturn::before,.saturn::after {    background:        linear-gradient(            rgba(212,203,174,1) 0%,            rgba(212,203,174,1) 10%,            rgba(221,203,157,1) 15%,            rgba(221,203,157,1) 17%,            rgba(213,181,143,1) 22%,            rgba(213,181,143,1) 26%,            rgba(208,180,158,1) 32%,            rgba(208,180,158,1) 36%,            rgba(218,188,162,1) 37%,            rgba(218,188,162,1) 39%,            rgba(211,184,157,1) 41%,            rgba(211,184,157,1) 49%,            rgba(205,186,156,1) 51%,            rgba(205,186,156,1) 52%,            rgba(202,176,153,1) 53%,            rgba(202,176,153,1) 65%,            rgba(190,177,145,1) 68%,            rgba(190,177,145,1) 80%,            rgba(150,144,130,1) 91%,            rgba(150,144,130,1) 95%,            rgba(131,129,117,1) 97%,            rgba(131,129,117,1) 100%        );}

再為星球增加光照效果：

.saturn::before,.saturn::after {    background:        radial-gradient(            circle at top,             transparent 40%,            black        ),        radial-gradient(            transparent 62%,            black        ),        linear-gradient(            rgba(212,203,174,1) 0%,            rgba(212,203,174,1) 10%,            rgba(221,203,157,1) 15%,            rgba(221,203,157,1) 17%,            rgba(213,181,143,1) 22%,            rgba(213,181,143,1) 26%,            rgba(208,180,158,1) 32%,            rgba(208,180,158,1) 36%,            rgba(218,188,162,1) 37%,            rgba(218,188,162,1) 39%,            rgba(211,184,157,1) 41%,            rgba(211,184,157,1) 49%,            rgba(205,186,156,1) 51%,            rgba(205,186,156,1) 52%,            rgba(202,176,153,1) 53%,            rgba(202,176,153,1) 65%,            rgba(190,177,145,1) 68%,            rgba(190,177,145,1) 80%,            rgba(150,144,130,1) 91%,            rgba(150,144,130,1) 95%,            rgba(131,129,117,1) 97%,            rgba(131,129,117,1) 100%        );}

最後，把畫面旋轉一點角度：

.saturn {    transform: rotate(-15deg);}

大功告成！