CSS樣式可以幫助我們在網頁中設計美觀的圖片。下面是一個簡單的例子，介紹如何使用CSS樣式畫圖。

/* 圖片樣式 */
.box {
padding: 10px;
background-color: #F6F6F6;
border: 1px solid #CCC;
}
/* 畫圓形 */
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #FFC107;
}
/* 畫三角形 */
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #F44336;
}
/* 畫矩形 */
.rectangle {
width: 150px;
height: 100px;
background-color: #4CAF50;
}
/* 畫梯形 */
.trapezium {
width: 100px;
height: 0;
border-bottom: 50px solid #2196F3;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}

以上代碼是一個簡單的圖片庫，每個樣式代表不同的形狀。我們可以將它們應用于HTML的元素上，創建相應的圖形。

以上HTML代碼可以生成一個包含四個圖形的矩形框。我們可以通過調整CSS樣式來改變圖形的大小和顏色。使用CSS樣式畫圖可以為我們的網頁增添豐富的圖形元素，提高頁面的視覺效果。