5

CSS3 Box Shadow でフェードアウト効果を実現することは可能ですか?

ここに私がこれまでに持っているものがありますこれは、垂直方向の側面にインセット/内側の影を追加するだけですが、上部でフェードアウト効果を達成する必要があります.

-moz-box-shadow: inset 5px 0 7px -5px #a4a4a4, inset -5px 0 7px -5px #a4a4a4;
-webkit-box-shadow: inset 5px 0 5px -5px #a4a4a4, inset -5px 0 5px -5px #a4a4a4;
box-shadow: inset 5px 0 7px -5px #a4a4a4, inset -5px 0 7px -5px #a4a4a4;

下の画像を参照して、期待される結果と現在の状況を確認してください。

期待される結果と現在の結果

4

3 に答える 3

3

私もそのようなものが必要でした：

基本的には、外側のdivにaを与え、内側のdivを外側のdivに、透明から必要な背景色へのグラデーションでdrop-shadow配置することです。position:relativ

http://jsfiddle.net/vBuxt/1/

于 2012-12-05T15:50:10.850 に答える
1

これは、私が最近取り組んだプロジェクトでこれにどのように取り組んだかを示すコードペンの例です。

http://codepen.io/byronj/pen/waOxqM

メイン コンテンツ セクションにボックス シャドウを追加しました。次に、コンテンツ セクションの下部に絶対配置の div を追加しました。これには、以下に示すように、一方の端にコンテンツの背景色があり、もう一方の端に透明な背景があるCSS グラデーションが含まれています。

.container {
   width: 1024px;
   margin: 0 auto;
 }

.container article {
   background-color: #fff;
   margin: -6em auto 10em auto;
   padding-top: 2em;
   width: 100%;
   box-shadow: 0px -2px 20px 2px rgba(0, 0, 0, 0.4);
}

/** GRADIENT **/
.bottom-gradient {
   position: absolute;
   width: 115%;
   height: 60%;
   z-index: 1;
   bottom: -20px;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.59) 10%, white 50%, white 100%);
}

コンテンツがグラデーションで覆われないようにするために、以下に示すように、"p" 要素をz-index 2 のposition:relativeに設定します。

p {
  padding: 1em 3em;
  position: relative;
  z-index: 2;
  margin: 1em auto;
  font-size: 1.3em;
  line-height: 1.5em;
}

エリックの状況では、ボックス シャドウを含む要素の上部にグラデーションを配置することで、この効果を逆にします。

お役に立てれば。

于 2015-08-10T22:48:27.943 に答える
0

複数の値を含む CSS3 スタイルを移行することはできません -:

CSS3 ではある色から別の色に遷移できますが、複数の値と混同されるため、CSS3 のグラデーション間で遷移することはできません。複数のシャドウ値でも同じになります。

ああ、私はあなたが達成しようとしていることを見ていると思います。解決策は、シャドウを使用せずに希望の外観を再現することです。以下のリンクは、シャドウの代わりに境界線を使用して考えられる解決策を示しています。http://css-tricks.com/examples/GradientBorder/

于 2012-09-21T16:22:30.400 に答える