1. 首頁
  2. 問答
  3. 按鈕邊框半徑和光標

按鈕邊框半徑和光標

2012-03-18 262 views
2

CSS邊框半徑確實會影響按鈕呈現​​（我看它是圓形），但不會影響它與用戶交互的方式（我仍然可以在其邊框外單擊按鈕）。我應該如何解決它？按鈕邊框半徑和光標

我看到了Chrome中的行爲。

button 
{ 
    cursor: pointer; 
    outline: none; 
    background-size: 100% 100%; 
    background-color: red; /*transparent;*/ /* It's actually red and ROUND. */ 
    background-position: center center; 
    background-repeat: no-repeat; 
    border: 0px; 

    -webkit-border-top-left-radius: 73px; 
    -webkit-border-top-right-radius: 73px; 
    -webkit-border-bottom-left-radius: 73px; 
    -webkit-border-bottom-right-radius: 73px; 
    width: 146px; height: 146px; 

    background-image: url('leftarrow.png'); 
}

This effect is unwanted.

問候，

來源

2012-03-18 noober

+0

我試圖避免在角落的指針光標。將附上截圖。 – noober 2012-03-18 17:57:00

回答

0

你怎麼樣？

它並沒有真正的「破碎」，因爲它是它應該工作的方式，所以你不能真正修復它，所有元素在瀏覽器中呈現爲矩形（如果你檢查圓形按鈕，你會看到它覆蓋矩形區域）

您可以（如@格雷格指出）使用<area>標籤，或者您可以使用JavaScript來做到以下幾點：

  • 如果圈COORDS外，顯示常規鼠標圖標;如果在裏面，顯示一個指針
  • 如果在圓外座標上，在onclick方法中返回false;如果在裏面，則返回true。

我希望這可以幫助，讓我知道如果你需要JS代碼的幫助。

乾杯！

來源

2012-03-18 18:11:15 fsodano

+0

好的，但是一個好的解決方法呢？我不喜歡和mousemove事件處理。 – noober 2012-03-18 18:32:05

+0

我能想到的唯一解決方法是，不涉及這些解決方案，就是創建足夠的元素來覆蓋所需的「不可點擊」區域（對應於未包含在圓圈中的區域），但這比添加一個標籤或在我看來用JavaScript來做。如果你想避免JS，是要走的路，正如@Greg建議的那樣。 – fsodano 2012-03-18 20:50:40

+0

順便提一下，下面爲@GrzegorzŁuszczek提出的SVG解決方案也是有效的，但是舊版瀏覽器可能不支持它（做一個快速測試，最新的IE，FF和Chrome支持它，但是IE8及以下版本不支持） – fsodano 2012-03-18 20:57:24

1

我認爲唯一的解決方案是使用內聯SVG和標籤circle。

我想瀏覽器渲染div爲矩形，並不在乎邊界半徑（因爲這個角仍然屬於矩形）。

來源

2012-03-18 18:11:42

相關問題

 相關問題