2009-08-10 70 views
3

alt textJavascript:如何創建一個圓角標籤菜單?

嗨,夥計們,你知道我可以下載的任何圓角選項卡嗎?或者我怎樣才能創建一個這樣的標籤?是否需要在選項卡菜單中使用圖像?我用過:

-moz-border-radius-topleft: 5px; 
-moz-border-radius-topright: 5px; 
border-top-left-radius:5px; 
border-top-right-radius:5px; 

但它並不完美。你知道有關圓角標籤的有用鏈接/教程嗎?

感謝提前:)

乾杯, 馬克

回答

3

最漂亮的圓角總是會被那些使用圖像來完成。還有什麼是瀏覽器的最佳嘗試,這可能不是你想要的。僅使用圖像也更容易。

你只需要一個小圖像爲每個角落,另一個花磚圖像的邊緣其餘部分。把它全部插入CSS類,你很好走。

+0

感謝您的建議馬修。我試圖找到具有圓角的JS標籤,並且容易定製,但是我找不到一個。我將只創建我自己的圓形標籤和我自己的JS選項卡的圖像。 我在想這個標籤菜單的背景是一個應用了滑動門技術的圖像,這樣一個非常大的文字將被圖像背景覆蓋。 – marknt15 2009-08-10 03:41:49

1

尚未被所有瀏覽器都支持,但是你可以使用CSS3來,而不需要圖像或JavaScript很容易地顯示圓角:

<div style="-moz-border-radius: 5px; -webkit-border-radius: 5px;"> 
    Rounded corners! 
</div> 

更多信息:http://www.css3.info/preview/rounded-border

這應該允許適度的降級在較舊的瀏覽器中(只是不會顯示爲圓整),但如果要確保所有用戶都具有相同的體驗,我仍然傾向於使用圖像。

+0

我已經在使用該功能,但是您無法使用該功能在我張貼的圖片中創建舍入的javascript選項卡。 – marknt15 2009-08-13 02:44:31

1

爲什麼不使用jQuery UI?他們有很好的圓形標籤。 請參閱http://jqueryui.com/themeroller/#themeGallery

+0

jQueryUI只在本地支持它們的瀏覽器上具有圓角(Mozilla Firefox和Webkit幫派) – 2009-08-10 13:40:47

+0

因爲jQuery UI選項卡在Drupal的fieldset手風琴中有衝突。 – marknt15 2009-08-13 02:45:25