1

ですから、所属するクラブのレイアウトを作成しています。とにかく、使用しているレイアウトには、ページ全体に沿って境界線が伸びる効果がありますが、上下のグラデーションを使用して改ざんされます。レイアウトは次のとおりです。私が参照しているのは、ページの左側にあるソフトシャドウです： https ：//dl.dropbox.com/u/6809301/sogawebsite.jpg

私は一般的に自分自身をhtml/cssにかなり熟練していると考えていますが、これを機能させるのに本当に苦労しています。親コンテナで高さを明示的に指定しないと、ボディが拡張するときに境界線を伸ばすことができません。サイドボーダーのグラデーションを使用すると、実際には3つの部分があります。上部はコンテナの上部にドッキングする必要があり、下部はページの下部にドッキングする必要があります。どちらも静的な高さにすることができ、中央は単色のままです。ページの高さに基づいて拡大する必要があります。

どんな助けも流用されるでしょう。私はいつも、HTMLでは高さベースのスケーリングがやや厄介だと感じていました。

4

2 に答える 2

1

可能なオプションの1つは、生成された疑似要素の背景として100％の高さとCSSグラデーションを使用して、絶対位置に生成されたコンテンツ（:before左側の「境界線」と右側の境界線）を使用することです。IE9以下の場合、通常の単色の境界線をフォールバックとして使用できます。:after

実例については、ライブデモを参照してください。

于 2012-10-14T18:36:43.940 に答える
1

それを行うための賢い方法は、特にグラデーションの境界線border-imageを使用することです。ブラウザのサポートは完全ではありませんが、これは本質的な効果ではないため、少し優雅に機能を低下させても、全体的なパフォーマンスが向上することはありません。

ここに小さなデモがあります。

私はSASS（Compassを使用）を使用しました。これはCSSにコンパイルされ（縮小されます！）、ベンダープレフィックスを処理します。

div  
  border-width: 3px
  +border-image(linear-gradient(top, rgba(0,0,0,0), black, black, rgba(0,0,0,0)) 1 100%)

ただし、マゾヒストの場合は、CSSを手動で実行できます。

div {
border-width: 3px;
-moz-border-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #000000, #000000, rgba(0, 0, 0, 0)) 1 100%;
-webkit-border-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(33.33333%, #000000), color-stop(66.66667%, #000000), color-stop(100%, rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000, #000000, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000, #000000, rgba(0, 0, 0, 0)) 1 100%;
border-image: linear-gradient(top, rgba(0, 0, 0, 0), #000000, #000000, rgba(0, 0, 0, 0)) 1 100%;}

それでもうまくいかない場合は、CSSトリックに関する他のテクニックをいくつか調べるか、画像を使用してください。

于 2012-10-14T18:37:46.510 に答える