CSS3是一種用來為網頁添加樣式的技術，它可以通過一些簡單的代碼制作出各種形狀的圖形。這篇文章將教你如何在網頁上制作一艘小船。

/* 設置小船的樣式 */
.boat {
width: 150px;
height: 100px;
position: relative;
background-color: #fff;
border: 2px solid #000;
border-radius: 100px 100px 0 0;
}
/* 給小船添加帆 */
.boat .sail {
position: absolute;
top: 20px;
left: -25px;
width: 0;
height: 0;
border-top: 50px solid #fff;
border-right: 25px solid transparent;
}
/* 給小船添加槳 */
.boat .oar {
position: absolute;
top: 30px;
left: 110px;
width: 0;
height: 0;
border-top: 20px solid #000;
border-left: 10px solid transparent;
}
/* 給小船添加水紋 */
.boat .wave {
position: absolute;
top: 60px;
left: 20px;
width: 110px;
height: 20px;
background-color: #0099cc;
border-radius: 100px 100px 0 0;
}

上面是用CSS3制作小船的代碼，其中boat是小船的類名，sail是帆的類名，oar是槳的類名，wave是水紋的類名。在boat類中設置了小船的寬度、高度、位置、背景色和邊框樣式，border-radius屬性設置了小船的邊角弧度。在sail和oar類中設置了帆和槳的樣式，用border屬性設置了形狀，用position屬性設置了位置。在wave類中設置了水紋的樣式，用background-color屬性設置了顏色，用border-radius屬性設置了邊角弧度。

這樣就完成了小船的制作，將上面的代碼添加到網頁中就可以看到一個可愛的小船了。可以根據需要修改代碼來改變小船的大小、顏色和位置等。CSS3的強大功能可以讓我們在網頁中添加各種有趣的圖形，讓網頁變得更加生動有趣。