CSS可用于美化網頁的各種元素，包括文本和圖片。在這篇文章中，我們將探討如何在文本圖片兩側添加特效。

/* 在圖片兩側添加文字 */
img {
float: left; /* 將圖片向左浮動 */ 
width: 50%; /* 圖片寬度，可根據實際情況調整 */
margin-right: 20px; /* 圖片和文字間隔 */
}
p {
text-align: justify; /* 文本兩端對齊 */
}
/* 在文字兩側添加圖片 */
p {
position: relative; /* 將p標簽設為相對定位 */
padding-left: 50px; /* 文字左側留出圖片空間 */
}
span {
display: block; /* 將圖片設為塊級元素 */
position: absolute; /* 圖片絕對定位 */
left: 0; /* 圖片在文字左側 */
top: 0; /* 圖片在文本的第一行 */
width: 40px; /* 圖片寬度，根據實際情況調整 */
height: 40px; /* 圖片高度，根據實際情況調整 */
background-image: url('image.png'); /* 圖片路徑 */
background-size: contain; /* 圖片適應DIV大小 */
background-repeat: no-repeat; /* 不重復顯示圖片 */
margin-top: 5px; /* 改變圖片和文字之間的空隙 */
}

以上是在文本和圖片兩側添加特效的CSS樣式代碼。使用這些代碼，我們可以輕松地創建精美的網頁！