CSS（Cascading Style Sheets，層疊樣式表）是一種用于定義HTML文檔外觀和布局的技術。除了可以設置文本和圖像的樣式和位置，CSS還可以進行繪圖。CSS繪圖的原理基于各種形狀和顏色它們可以作為HTML元素的背景或邊框。以下是CSS繪圖的基本原理。

.shape {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
}

首先，我們需要定義一個元素來繪制。在這個例子中，我們使用CSS定義了一個圓形形狀，它的寬度和高度都是100像素，并且設置了一個紅色的背景。border-radius屬性定義了圓角半徑，將它的值設為50%將會繪制圓形。

.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}

其次，我們可以使用CSS繪制各種形狀，例如三角形。在這個例子中，我們定義了一個高為100像素，底為100像素的三角形。我們使用border屬性來設置三角形的邊框樣式，左右兩側的邊框都是由50像素寬的透明線條組成的，底部邊框是藍色的，形成了一個三角形。

.gradient {
width: 200px;
height: 200px;
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

此外，我們也可以使用CSS來繪制漸變效果。在這個例子中，我們定義了一個200像素寬，200像素高的元素，并設置其背景為漸變色。我們使用background-image屬性來設置背景圖像，也就是這里的漸變效果。linear-gradient函數指定了漸變的方向和顏色值，這個例子中定義了一條從左到右依次變化的漸變線路，顏色為紅、橙、黃、綠、藍、靛藍、紫。

通過上述例子，我們可以看出CSS繪圖的原理實際上就是定義背景、邊框樣式或使用漸變效果來實現各種形狀。這種繪圖方式可以讓我們在不使用圖形軟件的情況下在網頁上實現各種各樣的效果。