30

CSS3 でクロス ブラウザ (Mozilla、Webkit、Opera) のインセット ボックス シャドウを作成して、上が黒から下が白に変わる方法はありますか? これを行うために私が見つけた最も近い方法は、このページで、影の外側を1つの色にしてから、内側の別の色に移行することだけを許可します: http://www.css3.info/preview/box-shadow /

4

9 に答える 9

3

残念ながら、これは不可能です。Photoshopなどで作成した背景画像付きのdivを使用することをお勧めします。

于 2012-03-10T20:19:56.083 に答える
3

:before 要素を使用して「影」を設定してみてください。

  .classname {
    &:before {
      content: '';
      position: absolute;
      display: none;
      top: -20px;
      left: -20px;
      right: -20px;
      bottom: -20px;
      z-index: -1;
      background: linear-gradient(to bottom, red, blue);


    }

    &:hover {
      &:before {
        display: inline-block;
      }
    }
  }

上記のコードは、このようなホバー効果を設定する方法の例です。

于 2016-03-23T20:30:33.373 に答える
3

背景画像の上に半透明のオーバーレイを作成することが意図されている場合は、 を使用せずに次のスタイル ルールを使用して実現できますbox-shadow。

background-image: linear-gradient(rgba(0, 0, 0, 0.5),
                                  rgba(255, 255, 255, 0.5)),
                  url("background.png");

background-imageMDNを参照してください。

于 2019-10-20T12:55:29.010 に答える