CSS中有一個屬性可以調整文本框的弧度,即border-radius。通過調整border-radius的值,可以讓文本框呈現不同的圓角效果。
.text-box { border: 2px solid #999; border-radius: 10px; padding: 10px; width: 200px; }
在上面的代碼中,text-box類的文本框給出了一個10像素的弧度。可以通過調整border-radius的值來改變圓角大小。例如,如果將border-radius的值設置為50%,則文本框的四個角都會變成半圓形。
.text-box { border: 2px solid #999; border-radius: 50%; padding: 10px; width: 200px; }
還可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius四個屬性分別調整一個角的圓角大小。例如,下面的代碼將文本框左下角的圓角大小設置為20像素:
.text-box { border: 2px solid #999; border-bottom-left-radius: 20px; padding: 10px; width: 200px; }
通過使用border-radius和它的四個子屬性,可以輕松地對文本框進行美觀的圓角處理。
上一篇用css調整js文字
下一篇css調整導航欄位置