CSS 是一種用于網頁排版的語言,可以控制字體、顏色、邊框等多種元素,讓網頁更加美觀和易于閱讀。本文將介紹如何利用 CSS 實現字體加圓形背景的效果。
在 CSS 中,我們可以使用background
屬性來設置背景。要實現圓形背景,需要先設置背景顏色,然后再利用border-radius
屬性設置為50%
來讓背景變成圓形。
p { background-color: #f1c40f; /* 背景顏色 */ border-radius: 50%; /* 設置為圓形 */ padding: 10px; /* 文字與背景之間的距離 */ font-size: 24px; /* 字體大小 */ font-family: Arial, sans-serif; /* 字體樣式 */ }
以上代碼將會給所有的<p>
標簽設置一個黃色的圓形背景,字體為 Arial 字體,大小為 24 像素,與背景之間有 10 像素的距離。
如果需要改變背景的顏色,只需要把background-color
的值改成想要的顏色即可。同樣,字體大小和樣式也可以根據具體需要進行調整。
通過以上的 CSS 代碼,我們可以在網頁中輕松實現字體加圓形背景的效果,讓網頁更加美觀、清晰、易于閱讀。