7

さまざまな高さに伸ばすことができる2つの列があります。デザイナーは、2つの列の間に影を付けたいと考えていますが、ご覧のとおり、画像は上下でフェードアウトしています。つまり、右側の列で左揃えになっているcssを使用して背景画像を使用することはできません。

間に放射状の影がある列

だから私は多分私は放射状のグラデーションを持つcss3ボーダーシャドウを使用することができます。影を最も高い列の高さまで伸ばす必要があるため、これを行うにはおそらくテーブルセルを使用します。どうすればよいですか？

4

4 に答える 4

19

以前の回答は実際にはあなたの質問に答えていません：「放射状のcss3ボーダーグラデーションシャドウを作成するにはどうすればよいですか？」

放射状グラデーションを使用して、画像なしで境界線の影をシミュレートできます。

デモ： http： //jsfiddle.net/sonic1980/wRuaZ/

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

background: -webkit-radial-gradient(50% 0%, 50% 5px, #aaa 0%, white 100%);
                                    |       |        |        |
                                    |       |        |        +--> color end     
                                    |       |        +--> color start
                                    |       +--> size of gradient ellipse (x-axis, y-axis)
                                    +---> position of ellipse center

垂直にするために変更したり、：beforeまたは：after疑似クラスを使用して実装したりするのは簡単です。

別の例、<hr>影付きのタグ：http: //jsfiddle.net/sonic1980/65Hfc/

于 2012-11-14T22:36:17.193 に答える
0

私はあなたがcss3を使う必要がないという提案を持っています、あなたは2つの異なるクラスを使うかもしれません、1つは普通で、もう1つは背景を持っています。そして、ページの読み込みが終了したら、jsメソッド、settimeoutを呼び出して数秒を遅延させ、クラスを切り替えます。

于 2012-10-30T07:56:25.930 に答える
0

画像を使用して、divに最小の高さを設定すると思います:-)

.column.right {
  padding-left: 30px;
  background: url(/img/shadow.png) no-repeat left top;
  min-height: 265px;
}
于 2012-10-30T08:02:24.380 に答える
0

別のソリューションでは、実際には動的な高さの列が可能になりますが、IE8+のみがサポートされています。

あなたがすることはbackground-image、最も高い柱の端に配置を適用することです。次に、とのポジショニングに設定されたと疑似要素を使用して、シャドウ:beforeに「キャップ」を設定できます。:afterabsolutetop:0;bottom:0

それは理にかなっていますか？これは、画像の代わりに境界線とテキストを使用して表示するJSFiddleです。

もちろん、JSFiddleののheightパラメータは重要ではありません。div存在する場合と存在しない場合がありますmin-height。div大きさを出すように設定しました。

于 2012-10-30T08:09:06.733 に答える