如何使文本框有圓角？

Question

我有這個線框http://problemio.com/problemionewest.pdf ，你會看到右上角有一個帶圓角的文本框。

是僅使用 css 還是圖像和 css 來完成？ 我有一個提供給我的圖像，但更願意用 css 來做。 無論如何，我不知道該怎么做，哈哈，所以任何幫助都會很棒！

我的當前版本在這里： http : //www.problemio.com

Answer 1

您可以使用 CSS 來做到這一點，但 IE8- 不支持它。 您可以使用諸如http://borderradius.com 之類的網站來提供您將使用的實際 CSS，它看起來像這樣（同樣，取決於您嘗試支持的瀏覽器數量）：

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Answer 2

這可以用 CSS3 來完成：

<input type="text" />

input
{
  -moz-border-radius: 15px;
 border-radius: 15px;
    border:solid 1px black;
    padding:5px;
}

http://jsfiddle.net/UbSkn/1/

---

但是，另一種方法是將input放在具有圓形背景的div ，並且input上沒有邊框