solid実線double2本線grooveinsetの線の中央がくぼんだ線ridgeoutsetの線の中央がでっぱった線inset上と左が暗く、下と右が明るい線。領域がくぼんで見えるoutset上と左が明るく、下と右が暗い線。img:hover」で透明度に差をつけるだけ。マウスオーバー時の画像を準備しなくても、ちょっと変化がつくので便利。img:hover」で透明度0.8にしている。filter:alpha(opacity=80);}/*最後の「filter:alpha(opacity=80)」はオールドIE用。*/リンクのマウスオーバー時に時間的に変化させる(transition)transitionプロパティを使って、時間的変化を指定する。ノーマル時にtransitionで「変化させたいCSSプロパティ」「変化の時間」「変化速度の割合い」などを指定。「:hover擬似クラス」などでノーマル時と違うスタイル指定をすれば、パッと変わるのではなく、時間的に変化する。「変化させたいCSSプロパティ」は、「all」で十分だと思う。(allはすべてのプロパティに適用されるので。:focus擬似クラスでも使えるはず。:hoverならPCビューのみ有効。スマホ専用サイトなら無意味。マウスオーバーという観念が無いので変化無し。ease-out(最後がゆっくり)で変化する。0.5秒・ease-out(最後がゆっくり)で変化。transition-propertyの値、transition-durationの値、transition-timing-functionの値、transition-delayの値」といったカタチで指定する。それぞれの値は「半角スペース」で区切る。最後の「transition-delayの値」は、そこまで厳密に指定する機会も無いので、私は省略することが多い。こちらtransition-propertyプロパティ(transitionを適用するCSSプロパティ)all(デフォルト。すべてのCSSプロパティに適用)none(どのCSSプロパティにも適用しない)プロパティ名(特定のプロパティに適用したい場合に指定。「,(カンマ)」で複数指定OK)transition-durationプロパティ(変化にかかる時間)0(デフォルト)数値+「s」で秒数で指定。