3

私はこれを持っています：

<style type="text/css">
  .TopBorderPanel {
     position: relative;
     overflow: hidden; 
     border-top: 2px solid #bbbb9f;
     margin: 1px;
     width: 500px; 
    }
</style>

上枠は＃bbbb9fの1色ですが、 50％＃bbbb9fと50％#ccccccの
2色にしたいのですが 可能ですか？

4

3 に答える 3

8

http://jsfiddle.net/CdWCA/

.TopBorderPanel {
    border-top: 2px solid #bbbb9f;
    position: relative;
}    

.TopBorderPanel:after {
    position: absolute;
    left: 50%;
    right: 0;
    top: -2px;
    border-top: 2px solid #cccccc;
    content: '';
}
​
于 2012-08-10T11:57:49.047 に答える
2

背景*.gifを2色に均等に分割し、上部に1ピクセルのパディングを使用することをお勧めします。

.TopBorderPanel {
    border: 0;
    background-image: url(...);
    padding-top: 1px;
}
于 2012-08-10T11:02:45.567 に答える
0

これを行うには2つの方法が考えられます。

私の最初の方法は、疑似セレクターを使用することです。これは、コンテンツ、スタイル、:beforeまたは:after要素を追加することです。したがって、実際には、1つの要素に対して2つのスタイルを設定でき、通常どおり1つだけで、この要素の前または後にいくつかの追加スタイルを追加できます。

通常どおりボーダートップを追加してから、疑似セレクターを使用して別のボーダートップを追加しました。

2番目の解決策は、ボックスシャドウを追加することです。これは、通常は拡散シャドウのように見えるのではなく、要素の上にある実線のシャドウのように見えるようにスタイル設定されています。

私はあなたにアイデアを与えることを願っているjsFiddleを作成しました、しかしあなたが理解していないならただ言ってください。

jsFiddle

于 2012-08-10T11:28:29.873 に答える