越來越多的網站與用戶交互的方式是通過圖形，這就需要在網頁中使用CSS和jQuery來繪制圖形。CSS可以用來定義簡單的圖形，jQuery則主要用于繪制動畫，從而使圖形更加生動。

CSS繪圖是基于圖形框模型的。通過設置各種屬性，如寬度、高度、背景等，就可以在圖形框內生成矩形、圓形、三角形等簡單的幾何形狀。以矩形為例，可以用下面的CSS代碼來繪制一個矩形：

.rectangle {
width: 200px;
height: 100px;
background-color: red;
border: 2px solid black;
}

這段代碼定義了一個矩形，寬度為200像素，高度為100像素，紅色背景，黑色邊框，像素寬度為2px。將此CSS類應用于HTML元素時，就可以生成矩形。

jQuery繪圖是更為復雜的。它可以通過將圖形分解成許多小的部分，并對這些部分應用各種動畫來達到繪圖的效果。例如，可以用下面的jQuery代碼來繪制一個心形：

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(75, 40);
context.bezierCurveTo(75, 37, 70, 25, 50, 25);
context.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
context.bezierCurveTo(20, 80, 40, 102, 75, 120);
context.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
context.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
context.bezierCurveTo(85, 25, 75, 37, 75, 40);
context.closePath();
context.fillStyle = "#FF0000";
context.fill();

這段代碼實現了用canvas元素繪制一個心形。context對象是用來繪制圖形的，它可以使用路徑、線、圓形、填充顏色等多種方式繪制圖形。上述代碼中，使用bezierCurveTo函數來繪制貝塞爾曲線，從而得到心形的形狀。填充顏色使用fillStyle屬性設置。

總的說來，CSS和jQuery都可以用來繪制網頁上的圖形，但在使用過程中需要注意彼此之間的適用范圍和優點。