CSS透明矩形是一種在網頁設計中常被使用的特效，它可以實現在頁面中添加半透明的矩形框來進行排版或是突出某些內容。

.transparent-box {
width: 200px;
height: 100px;
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid #000000;
}

實現透明矩形的關鍵是使用CSS的rgba屬性來設置背景顏色，其中的alpha值控制透明度。rgba屬性的四個參數分別為紅、綠、藍和alpha，取值范圍是0-255。當alpha為1時，顏色完全不透明；當alpha為0時，顏色完全透明。

在上面的代碼中，我們將背景顏色設置為白色，但alpha值設為0.5，就可以實現半透明的效果。同時，我們增加了一個黑色的邊框，使透明矩形更加醒目。

除了背景顏色外，我們還可以通過box-shadow屬性為透明矩形添加陰影效果，代碼如下：

.transparent-box {
width: 200px;
height: 100px;
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid #000000;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

box-shadow屬性中，第一個參數控制水平偏移量，第二個參數控制垂直偏移量，第三個參數控制模糊程度，第四個參數仍然是alpha值。

透明矩形是網頁設計中常用的一種特效，經過簡單的CSS設置，就可以實現獨特的視覺效果，受到眾多設計師的青睞。