CSS邊框內嵌文字,顧名思義就是讓文字在邊框內部呈現。看起來是一種比較特殊的效果,但其實實現方法也很簡單。
首先,需要在CSS中為元素定義邊框樣式,如下:
.example { border: 2px solid #ccc; }
上述代碼為一個類名為example
的元素定義了一個2像素粗、顏色為 #ccc 的實線邊框。接下來,我們要在這個邊框內嵌入文字,需要先給這個元素定義一個相對定位(position: relative)。
.example { border: 2px solid #ccc; position: relative; }
接著,在這個元素內添加一個用于承載文字的元素,我們一般使用<span>
標簽來實現,如下:
.example { border: 2px solid #ccc; position: relative; } .example span { position: absolute; top: -10px; left: 10px; }
上面代碼中,我們為這個<span>
標簽定義了絕對定位(position: absolute),并設置了距離頂部10像素、距離左側10像素的位置。這樣設置完后,頁面上就會出現一段邊框內嵌文字的效果。
最后我們需要調整文字的顏色和背景色,讓它們與邊框形成更好的對比,更加美觀。比如設置白色文字和深藍背景色。
.example { border: 2px solid #ccc; position: relative; } .example span { position: absolute; top: -10px; left: 10px; color: #fff; background-color: #336699; padding: 0 5px; }
上面代碼中,我們為這個<span>
標簽定義了白色文字(color: #fff)和深藍背景色(background-color: #336699),并設置了 padding 值來留出文字的間隔。
最終的效果如下:
文字在邊框內