🔧 阿川の電商水電行
標題：CSS冰山
已發布：是
說明：用 CSS 寫的漂浮冰山卡通圖，完全使用 HTML。
標籤：css、webdev、showdev、codepen
封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecpywkr3xdwpa7ckfnmw.png
規範網址：https://alvaromontoro.medium.com/css-iceberg-a7b067c52c68
CodePen每週都會舉辦程式設計挑戰賽，本週的主題是冬季，重點是冰雪。我決定參與其中，畫一座漂浮在海洋中的冰山。
我在網路上找到一張很喜歡的冰山圖片，覺得用 CSS 重現它應該會很有趣。一開始，我考慮使用多個元素，後來改用單一元素，最後決定完全用 CSS 繪製整個冰山，不使用任何 HTML 元素。
每當我在 CodePen 上分享一個零元素繪圖時，我都會加入一個簡短的免責聲明：雖然 HTML 面板看起來是空的，但實際上仍然包含一些 HTML 程式碼。具體來說，我使用了<body>元素及其 `::before和::after偽元素來建立圖形。
也可以透過將樣式直接應用於:root並強制瀏覽器渲染 CSS 來實現真正的零 HTML 設定（但這僅適用於 Apache 和 Firefox）。因此，從技術上講，這種繪圖可以用純 CSS 實現，完全不需要任何 HTML 元素。
圖紙本身相當簡單明了：
-
body：天空（線性漸層）和兩個conic-gradient陰影 -
body::before：冰山，使用clip-path塑形，並使用圓錐漸層著色 -
body::after：水和波浪，使用重複的水平徑向漸變和用於表示深度的線性漸變建立。
{% codepen https://codepen.io/alvaromontoro/pen/raeroda %}
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
