4

重複の可能性：
光るテキスト（HTML CSS）

だから私はテキストグロー効果のための100％cssソリューションを探しています。text-shadowを試しましたが、思い通りに見えませんでした。ボックスシャドウで効果を出すことができました。ただし、これは要素のエッジの外側でのみ光り、内側は空白のままになります。これが写真です：

ここに画像の説明を入力してください

内側に空白がなく、上記のように見栄えの良い外側の輝きを得るにはどうすればよいですか？

私のコードは単純<li><a></a></li>で、liとタグの両方にホバーcssがあります。

前もって感謝します。

4

3 に答える 3

15 
a:hover { text-shadow: 0 0 5px #ff0000; }
于 2012-10-11T17:27:35.650 に答える
2

ホバーのテキストシャドウはどうですか

このような

<li>
  <a></a>
</li>

css

li a:hover {
  text-shadow: 2px 2px 10px #000000;

  filter: dropshadow(color=#000000, offx=2, offy=2);
}

ここでフィドル

ここでcss3プロパティを生成します

于 2012-10-11T17:29:01.410 に答える
0

あなたは余分な要素でこれを行うことができます

jsfiddleの例（またはフルスクリーン）

HTML

<ul id="nav">
    <li><span></span><a href="#">Home</a></li>
    <li><span></span><a href="#">Products</a></li>
    <li><span></span><a href="#">Really Long Nav Item</a></li>
</ul>

CSS

#nav {background-color:#000;overflow:hidden;}
#nav li {float:left;position:relative;}
#nav a {display:block;background:transparent;color:#fff;font-weight:bold;text-decoration:none;padding:20px;position:relative;}

#nav li:hover span {
    position:absolute;
    left:50%;top:50%;
    margin-left:-35%;
    width:70%;height:0px;
    box-shadow:0 0 20px 12px rgba(150, 180, 200, .6);
    border-radius:10px 6px;
}

潜在的に、余分な要素をスキップして、アンカーまたはリストアイテムの疑似 <span>要素を使用してこれを行うことができます</ p>:before

于 2012-10-11T18:14:08.697 に答える