このようなナビゲーション バーを次のように記述するには?_html/css_WEB-ITnose

最初はこんな感じでしたが、
マウスポインタを乗せるとこうなります
後者の書き方はbox-shadowを使うようです 具体的なコードを教えてください

返信ディスカッション（解決策）へ

jsのfocusイベントを使ってみましょう~~マウスを置いたらfunction関数を使ってループ{if判定if(){置いたときに画像を変更
}else{そうでない場合はそれ
実はこれはレベル2です ナビゲーションはCSSでもできますが、効果はJavaScriptほどではありません
貼った後にCSSの効果を出したいのですが、jsでできます

青い部分はできますdiv で、単語は div 内のスパンであり、上に移動するとスパンが設定されます。境界線は黒です。外側に移動すると、境界線の色は透明になります。

< ;/html>
border-color だけでそれを作るのは不可能です。私が望むのは、box-shadow の値の多くのグループを試してみたところ、すべて異なりました

それから教えてください。どのような効果が欲しいですか
あなたが与えた2枚の写真の効果でOKです

それからあなたが望む効果を教えてください
2枚の写真の効果でOKです
境界線を埋め込み効果にすることです ボックスを使用する必要があります。 -shadow ですが、いくつかの値セットを試してみましたが、どれも正しくありません

box-shadow: 0px 0px 5px rgba(0, 0, 0 , 0.4) Inset, 0px 1px 0px RGBA (255, 255, 255, 0.1) ;
テキストシャドウ: 0px -1px 0px RGBA (0, 0, 0, 0.796)、0px 0px 10px RGBA (255, 255, 255, 0.298);