CSS弧形文本框是一種非常漂亮的樣式,使文本框具有光滑、弧形的邊緣。下面我們來看一下如何使用CSS來創建一個弧形文本框。
// 創建一個弧形文本框的容器 .arc-textbox { border: 2px solid #ccc; border-radius: 50px; padding: 10px; width: 300px; text-align: center; } // 創建一個弧形的邊界 .arc-textbox::before { content: ""; display: block; width: 100%; height: 20px; border-radius: 50%; background-color: #ccc; position: absolute; top: -10px; left: 0; } // 讓文本在弧形文本框中居中對齊 .arc-textbox p { margin: 0; position: relative; top: 50%; transform: translateY(-50%); }
上面的代碼中,我們首先創建了一個弧形文本框的容器,并設置了一些基本的樣式:邊框、邊框半徑、內邊距、寬度和文本對齊方式。
接著,我們使用::before偽元素來創建一個弧形的邊界,用來使文本框具有弧形效果。我們設置了它的位置為absolute,top為-10px,left為0,這樣它就能夠蓋住容器的頂部邊緣,并且看起來像是一個圓形的邊界。
最后,我們使用相對位置和transform來使文本在弧形文本框中垂直居中對齊。這樣,無論文本內容有多長,都會始終居中顯示。
以上就是創建CSS弧形文本框的全部代碼。你可以根據需要修改容器和文本樣式來實現不同的效果。
上一篇css彈性盒左對齊
下一篇css彈出div圖片居中