2011-09-09 12 views
1

こんにちは私は、divの背景色にフェードインする境界線を作成する方法を理解しようとしていましたが、これが私が思いつく唯一の解決策です。 私はグーグルで調べてみましたが、人々はCSS3を提案しているようですが、まだ開発中であり、現代のブラウザでは完全には紹介されていないと言われました。グラデーションボーダーcss/htmlで囲むdiv

これは私が思いついた解決策です。これを行う簡単な方法はありますか、これは合理的なアプローチですか? http://i.imgur.com/sh6Z8.png

HTML & CSS:境界線の各部分のための多数のdiv(以下など)を作成し、境界線の一部に応じてその背景画像を設定し

http://codeviewer.org/view/code:1e4f

(新規Webプログラミングするとスタックのオーバーフロー、私は何か非正直、感謝している場合は申し訳ありません)。

答えて

0

がティムはすでにあなたのウェブサイトの幅が静的なものである場合、あなたはそのような何かを行うことができ、それを言ったように(CSS3これは、超簡単です、あなたの使用状況のケースのために良い選択肢かもしれ場合でも、実際には...)

http://jsfiddle.net/Xtw84/3/ - これは以前の回答に由来しているため、エッジはソフトではありませんが、アイデアは同じです。 (それは問題ではありません)バックグラウンドでイメージを追加したので、そのイメージがどのように機能するかを見ることができます。 Theresは必要ありません..実際には半分の背景画像をスライスする意味がありません。

ちょっと切ったバージョンです。 http://jsfiddle.net/Xtw84/4/


CSS3で、私は、箱の影でこれを行うと、必要に応じて同じくらいの影を拡大します。

+0

はい、私が見つけたCSS3のソリューションです。 – LylatWars

0

あなたのレイアウトは流動的になりますか?例えばそれは幅/高さで成長するでしょうか?幅が広がらない場合、背景画像を設定するだけの理由はありません。

あなたがしていることについては、私はグラデーションの境界線を使用せず、背景の画像に固執します。だから、

+0

幅が伸びることはありませんが、高さになります。そのため、ブラウザの高さに応じて「100%」を使用しただけです。それが幅が広がる場合は、上の境界線と幅の境界をコンテナの100%に設定してブラウザと一緒に変更することはできませんか? 迅速な対応に感謝します。 – LylatWars

+0

@LylatWars実際のコンテンツの高さが底に達していなくても、コンテンツ領域を常に下に伸ばしたいと思っていますか?私の答えでは、多かれ少なかれTimの答えと同じですが、例を挙げます。コンテンツ領域には流体の高さがあり、その高さはコンテンツの量によって決まります。 – Joonas

+0

@Lollero、ああ、私はあなたにゆっくりゆっくり、3つの画像に分割して流体の高さを処理します。私は流体の幅を扱う方法を前提としていますが、ほとんどの場合、流体の幅を持って...大丈夫、ありがとう。 – LylatWars

関連する問題