圓角矩形是一種在Web開發中經常使用的形狀,它可以增加頁面設計的美觀性。在一些場景下,可能需要把圓角矩形改成空心狀態,讓其更加清爽。CSS可以實現這一效果:
/* 定義空心圓角矩形樣式 */ .bordered { border: 2px solid #ccc; border-radius: 5px; padding: 10px; } /* 定義內部文本樣式 */ .bordered p { margin: 0; font-size: 16px; color: #333; }
在這個樣式中,我們使用了border屬性設置邊框,把圓角矩形的邊界變成了實線2像素寬的邊框。同時,使用border-radius屬性設置圓角半徑,將其定制為5像素。
接著,我們使用padding屬性設置內邊距,讓內部的文本與邊框保持一定距離,增加美觀性。最后,我們設置內部文本樣式,在這個例子中,我們把文本的字號設置為16像素,顏色設置為黑色。
通過上述CSS樣式,我們就可以輕松地創建一個空心圓角矩形,并設置其中文本的樣式。當然,上述樣式只是一個簡單的樣例,大家可以根據實際需要來修改其大小、顏色、文本樣式等等。同時,這個樣式也可以與其他CSS樣式結合使用,讓頁面設計更加多彩。
上一篇css表格搜索功能怎么弄
下一篇css改圖片的大小