HTML5和CSS3是現代Web設計中必不可少的兩個技術，它們可以為網站增加美觀與交互性。其中，HTML5用于網頁結構標記，而CSS3則用于頁面的樣式設計。下面將介紹如何使用HTML5和CSS3來繪制一個矩形。
<!DOCTYPE html> <html> <head> <title>CSS3繪制矩形</title> </head> <body> <div class="rectangle"></div> </body> </html>
HTML5代碼很簡單，只需要一個div元素即可，它的class屬性為“rectangle”，該屬性將在CSS樣式中被使用。
.rectangle {
width: 200px;
height: 100px;
background: #2ecc71;
}CSS3代碼是通過選擇器和屬性來設置樣式的。上面的代碼設置了一個200像素寬，100像素高，背景顏色為#2ecc71的矩形。這里還可以使用其他的屬性來設置矩形的邊框、圓角、陰影等等。
總的來說，使用HTML5和CSS3可以繪制出各種形狀和動畫效果，例如三角形、星形、陰影、漸變、動畫效果等等，這樣的網頁設計效果更加出色、直觀，增加了交互性，能更好促進用戶體驗。
上一篇CSS布局設計色彩照片