CSSボタン付き外側ボタンアロイ

Question

CSS :focusルールを使用してFirefoxにアウターグローを作る方法はありますか？ （Chromeに既にあるものに似ています）

Answer 1

:focusルールの場合は、-moz-box-shadow（またはFirefox 4以降のみに興味がある場合はbox-shadow）を追加できます。それを使って様々な角度のグローを追加することができます。

Answer 2

これは、複数の影によって行うことができます。

CSS

color: #000; 
background: #000; 
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20; 

は例5.5を参照してください。

http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/

Answer 3

あなたはこのように同じことを行うことができます。

H TML：

<button id="a">click</button> 

CSS：jsfiddleに

button{ 
background:#f7f7f7;padding: 0 .5em; 
height: 2.0833em; 
border: 1px solid #CCC; 
color: black; 
background: #F6F6F6; 
background-image: -moz-linear-gradient(top,white,#EFEFEF); 
background-image: -webkit-gradient(linear,left top,left bottom,from(white),to(#EFEFEF)); 
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=white,endColorStr=#EFEFEF); 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
border-radius: 3px; 
white-space: nowrap; 
vertical-align: middle; 
cursor: pointer; 
overflow: visible;} 

button:hover{ 
    box-shadow:0 0px 3px #999; 
    -webkit-box-shadow:0 0px 3px #999; 
    -moz-box-shadow:0 0px 3px #999; 
} 

チェック：http://jsfiddle.net/naveed_ahmad/LZGq6/