如何使文本變厚，並用css填充顏色，並改變顏色onhover

我想增加一個文本的寬度。我不想讓它變成粗體。我試圖保持內部的文字爲空。我的想法是用一種顏色填充文本，然後，改變顏色。如何使文本變厚，並用css填充顏色，並改變顏色onhover

這裏是什麼，我試圖完成一個畫面：

http://img.ctrlv.in/50eee77779a5b.jpg

的問題是，我不能找到一種方法，如何使用CSS來增加文本的寬度（我發現它通過JavaScript，但然後將文本呈現的圖像的屬性）（並因此onHover選項效果是不可能的）（I找到了一種方法在一個W3Schools的教程這裏

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_text2）

我使用JavaScript來增加字體寬度尋找一個HTML解決方案（不是帆布）

我知道有一個CSS3/HTML 5中的快捷方式來實現這種效果，但無法重新搜索/搜索網站，我看到了效果。

任何幫助，將不勝感激提前感謝

來源

2013-01-10 Rahul Shah

你找帆布或CSS/HTML解決方案？（你的鏈接指向一個畫布的例子） – tborychowski

我正在尋找一個CSS/html解決方案。我只是想顯示鏈接，因爲它顯示瞭如何使文本變厚。 –

可能不是完美的，但不知道CSS選擇器，可以增加信的寬度，你可以嘗試像：

a:hover { 
    letter-spacing: 0.2em; 
    color: #07C; 
}

這增加距離在字母之間，也可以使用css而不是jquery進行懸停事件，它更簡單！

來源

2013-01-10 16:09:50

就我所見，你實際上想要撫摸文本。只要筆畫發生在文本的邊界之外，字體的寬度可以保持不變，對吧？那麼，CSS Tricks has an article談論使用webkit文字筆觸和/或文字陰影來撫摸文字。一個例子是here。

所以，你最終會得到這樣的：

/* CSS from tutorial */ 
.stroke { 
    /* WebKit (Safari/Chrome) Only */ 
    -webkit-text-stroke: 1px black; 

    /* If we weren't using text-shadow, we'd set a fallback color 
    and use this to set color instead 
    -webkit-text-fill-color: white; */ 

    color: white; 

    text-shadow: 
    3px 3px 0 #000, 
    /* Simulated effect for Firefox and Opera 
     and nice enhancement for WebKit */ 
    -1px -1px 0 #000, 
    1px -1px 0 #000, 
    -1px 1px 0 #000, 
    1px 1px 0 #000; 
} 

/* The colour changing bit - added by me */ 
.stroke:hover { 
    color:blue; 
}

來源

2013-01-10 16:18:45 jaypeagi

如何使文本變厚，並用css填充顏色，並改變顏色onhover

回答

相關問題