CSS3不帶js /圖像的輸入元素的圓角

我需要在不使用JavaScript和圖像的方式..

補充：

<!DOCTYPE html> 
<html> 
<head>  
    <title>xx</title> 
<style type="text/css"> 
input 
{ 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    border-radius: 15px; 
} 
</style> 
</head> 
<body> 
<input type="text" value="test" /> 
</body> 
</html>

它不會在Firefox 3.6.12工作！

來源

2010-11-30 Isis

[可以使用CSS創建圓角的最佳方式是什麼？]（http://stackoverflow.com/questions/7089/what-is-the-best-way-to-create-rounded-corners - 使用 - CSS） – codingbadger 2010-11-30 12:55:13

看到我的編輯答案。你的代碼有錯誤。 – 2010-11-30 13:13:51

CSS3有許多有利於網頁設計師的新功能。這包括邊框圓角：

input 
{ 
    -webkit-border-radius: 5px; //For Safari, etc. 
    -moz-border-radius: 5px; //For Mozilla, etc. 
    border-radius: 5px; //CSS3 Feature 
}

您可以將類添加到您的輸入字段，並使用這個類在這個CSS代碼段針對某些輸入元素。

Internet Explorer 8不支持CSS3。 Internet Explorer 9將有望包含其所有功能。

關於你編輯的問題：

"text/css/"應該"text/css"。

來源

2010-11-30 12:59:21

CSS 3會幫助你。

此樣式表的作品輸入元素也[在ATLEAST現代瀏覽器]，雖然沒有在IE測試

border-radius: 16px; /* half of button size + padding */ 
-moz-border-radius: 16px; 
background: -webkit-gradient(linear, left top, left bottom, from(#8cc0f6), to(#cfe4fa)); 
background: -moz-linear-gradient(top, #8cc0f6, #cfe4fa);

來源

2010-11-30 12:55:11

你這樣做是正確的（現代瀏覽器）的方式，問題是你錯誤地打開的樣式標籤：

<style type="text/css/"> 
        ^^^ this/shouldn't be there

注意，你的CSS roundet角落不會在IE工作，要實現這一點，你必須看看http://css3pie.com/或使用圖像/ jsvascript。

來源

2010-11-30 13:16:24 oezi

對於現代的瀏覽器，使用下面的CSS代碼：

input { 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
}

換句話說，幾乎你已經做了什麼。

這應該會讓你在除IE以外的所有主流瀏覽器都有圓角。

我懷疑它不起作用的原因是（a）您在IE中測試它（請參閱下面的解決方案），或者（b）您的<style>標記具有不正確的type屬性。您可能根本不需要type屬性;我建議完全刪除它（通常只在從外部源加載樣式表時纔會看到）。如果你確實保留了它，那麼刪除尾部斜線，因爲這肯定是不正確的。

對於IE，該解決方案更爲複雜：

通過遠至CSS3的最佳方案在IE圓角問題是CSS3Pie。

這是一個IE瀏覽器，只幫閒基於稱爲CSS行爲的IE瀏覽器的功能。這意味着，非IE瀏覽器會完全忽略它，甚至不用下載包含破解宏達文件。

它使用IE的VML矢量圖形庫生成真正的圓角，所以你永遠不會有任何鋸齒邊緣或不匹配的背景顏色或圖案。

儘管它確實存在一些已知問題，但仍處於積極的發展階段，甚至它所具有的問題遠沒有任何其他解決方案存在問題。

CSS行爲是基於Javascript的 - 你不會找到一個解決方案，你的問題，不使用JavaScript的某處沿線（除非你打算使用舊的角落圖形的一切），但因爲它被封閉在一個MS-特定HTC文件，其他瀏覽器永遠不需要知道這件事，所以你可以使用他們正常的CSS3沒有任何JavaScript。

這的確意味着，如果IE用戶不太可能發生JavaScript關閉，那麼他們會得到方角。但你可以相當有信心，他們將是一個微乎其微少數。

來源

2010-11-30 13:52:22 Spudley

CSS3不帶js /圖像的輸入元素的圓角

回答

相關問題