在CSS中,我們可以利用邊框的一小部分來添加文字或其他內容,這樣可以讓元素更加豐富和有趣。下面是一些可以用來添加邊框內文字的CSS樣式。
/* 創建一個邊框包含文字的樣式 */ .border-text { border: 2px solid #000; padding: 10px; position: relative; } /* 在邊框內添加文字 */ .border-text:after { content: "邊框內的文字"; position: absolute; top: -15px; left: 30%; background-color: #fff; padding: 0 10px; } /* 創建一個帶下劃線的文本框 */ .underline-box { border-bottom: 2px solid #000; padding: 10px; position: relative; } /* 在下劃線上添加文字 */ .underline-box:after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background-color: #000; } /* 創建一個邊框環繞的圓形 */ .circle { width: 100px; height: 100px; border: 2px solid #000; border-radius: 50%; position: relative; } /* 在圓形中添加文字 */ .circle:after { content: "圓形內的文字"; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 0 10px; }
以上樣式可以根據具體需求進行修改,例如更改文字內容、顏色、字體等。使用這些樣式可以為網站或應用程序中的元素增加一些額外的趣味性和功能性。