0

内部にテキストを含む div を作成しました。ホバー関数を作成しようとしています。これにより、四角い div のエッジが半透明になります。

私は放射状グラデーションでこれをやろうとしています。しかし、透明度を使用しようとすると、放射状グラデーション全体も透明になります。

中間色を「削除」して、テキストが中央に表示され、白い端が透明になるようにする方法はありますか?

いろいろ聞いてみたところ、「上書き」する方法があると聞きました。それが可能かどうかはわかりません。

私はフォトショップが良い代替手段であることを知っています. しかし、このような効果を純粋に CSS で成功させる方法があるかどうかを確認したいと思います。または、私が見逃している放射状グラデーションよりも実用的な、透明なエッジを持つボックスを作成するためのより良い方法はありますか?

4

2 に答える 2

2

このようなもの

.test {
  background-image: radial-gradient(ellipse, white, transparent 70%);
  color: red;
  font-size: 70px;
  display: inline-block;
  border: solid 1px black;
  }
  

body {
  background-color: lightgreen;
 }
<div class="test">TEST</div>

于 2015-06-14T20:56:52.570 に答える