使用CSS繪制膠囊的指南

在CSS中繪制膠囊，我們可以使用border-radius屬性來創(chuàng)建一個橢圓形的形狀，以及使用box-shadow屬性來添加一些視覺深度，以下是一個簡單的示例，展示了如何使用CSS來繪制一個基本的膠囊形狀：

.capsule {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50% 50% 50% 50%;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

在這個示例中，我們創(chuàng)建了一個名為capsule的類，并設(shè)置了一些基本的樣式屬性。width和height屬性用于設(shè)置膠囊的大小，background-color屬性用于設(shè)置膠囊的顏色。

border-radius屬性用于設(shè)置膠囊的邊框半徑，這里我們將其設(shè)置為50%，以創(chuàng)建一個完全的橢圓形形狀。box-shadow屬性用于添加一些視覺深度，這里我們設(shè)置了一個簡單的陰影效果。

通過應(yīng)用這個類到HTML元素上，我們就可以在網(wǎng)頁上繪制一個基本的膠囊形狀了。

<div class="capsule"></div>

這將在頁面上顯示一個寬度為200像素、高度為100像素的膠囊形狀，背景顏色為深藍(lán)色，邊框半徑為50%，并添加了一些視覺深度。

這只是一個基本的示例，你可以根據(jù)自己的需求進(jìn)行調(diào)整和擴(kuò)展，你可以添加更多的樣式屬性來進(jìn)一步定制膠囊的外觀，或者將多個膠囊組合在一起以創(chuàng)建更復(fù)雜的效果，希望這個示例能對你有所幫助！