CSS膠囊是一種經(jīng)常用在網(wǎng)站設(shè)計(jì)中的元素，它具有獨(dú)特的外觀并能夠幫助網(wǎng)站頁面更好地傳達(dá)信息。在CSS中，我們可以使用不同的代碼來實(shí)現(xiàn)膠囊元素的兩種顏色。

/* 實(shí)現(xiàn)CSS膠囊元素的兩種顏色 */
/* 第一種顏色為#26A65B */
.green-capsule {
background-color: #26A65B;
color: #fff;
border-radius: 20px;
display: inline-block;
padding: 8px 20px;
font-size: 12px;
text-transform: uppercase;
}
/* 第二種顏色為#3498DB */
.blue-capsule {
background-color: #3498DB;
color: #fff;
border-radius: 20px;
display: inline-block;
padding: 8px 20px;
font-size: 12px;
text-transform: uppercase;
}

以上代碼展示了如何使用#26A65B和#3498DB這兩種顏色來實(shí)現(xiàn)綠色和藍(lán)色CSS膠囊。我們可以在代碼中看到background-color、color和border-radius等屬性的使用，這些屬性可以控制膠囊的顏色、文本顏色以及邊框的圓角程度等等。此外，我們還可以通過調(diào)整padding和font-size等屬性來改變膠囊的大小和字體。

最終，我們可以在HTML代碼中使用這些CSS類來創(chuàng)建我們自己的膠囊元素，例如：

<!-- 使用綠色膠囊 -->
<span class="green-capsule">新聞</span>
<!-- 使用藍(lán)色膠囊 -->
<span class="blue-capsule">活動(dòng)</span>

以上代碼將分別顯示一個(gè)綠色膠囊和一個(gè)藍(lán)色膠囊，它們具有不同的顏色和文本。這展示了CSS膠囊的靈活性和可定制性，使其成為網(wǎng)站設(shè)計(jì)中的一個(gè)有用工具。