在網頁設計中，我們經常需要將文字寫在圖形里，美化網頁內容的同時提升用戶體驗。CSS提供了一些屬性幫助我們實現這一功能。

.shape {
width: 200px;
height: 200px;
background-color: #66CCFF;
border-radius: 50%;
text-align: center;
line-height: 200px;
font-size: 24px;
color: #FFFFFF;
}

上述代碼展示了如何將文字寫在一個圓形的背景里。我們先定義一個class叫做"shape"，然后設置該元素的寬度和高度為200像素，顏色為#66CCFF，半徑為50%（即繪制一個圓形），文本居中顯示。這里需要注意的是，為了讓文本垂直居中，我們將行高設置為container的高度（200px）。接著，我們將文本大小設置為24像素，顏色為白色，這樣我們的圓形元素就完成了。

除了圓形元素，我們還可以將文本寫在其他任何形狀的容器里。例如：

.shape {
width: 200px;
height: 200px;
background-color: #66CCFF;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
text-align: center;
line-height: 200px;
font-size: 24px;
color: #FFFFFF;
}

這里我們將容器的形狀設置為一個菱形，通過clip-path屬性定義了邊角的坐標點，從而剪裁出我們需要的形狀。其他的屬性與前例相同。

最后，我們也可以利用偽元素實現類似于標簽的效果：

.shape {
width: 200px;
height: 100px;
position: relative;
background-color: #66CCFF;
text-align: center;
line-height: 100px;
font-size: 24px;
color: #FFFFFF;
}
.shape:before {
content: "新";
display: inline-block;
position: absolute;
top: -10px;
right: -10px;
background-color: #FF6600;
width: 30px;
height: 30px;
border-radius: 50%;
text-align: center;
line-height: 30px;
font-size: 18px;
color: #FFFFFF;
}

這里我們定義了一個class叫做"shape"，將其高度縮小為100像素，利用偽元素加入一個標簽，表示該容器是最新的信息。我們設置偽元素的內容為"新"，顯示為內聯塊元素，并絕對定位到容器的右上角，設置背景顏色、大小、圓角等屬性，完成效果。