5

検索したところ、複数の国境の問題しか見つかりませんでした。繰り返される 4 色で 1 つの境界線を作成する必要があります。

<div id="wrapper" style="width:100%; background:#ccc; border-top: thick solid blue; border-bottom: thick solid blue; padding:10px;">
<div id="content">
This is some content.
</div>
</div>

http://jsfiddle.net/f7JT7/

すべてをインラインで行ったので、理解しやすくなりました

ボーダーの上下を4色の繰り返しにしたいです。

1 2 3 4 1 2 3 4 1 2 3 4

これはcssで可能ですか？私は次のようなことができることを知っています

<div>
<div id="red" style="width:50px;"></div><div id="green" style="margin-left:50px; width:50px;"></div><div id="purple" style="margin-left:100px; width:50px;"></div>
</div>

しかし、CSSでこれを行うより良い方法があるかどうかを知りたいですか? ありがとう。

これが私が探している国境です

これは私のデザインのスクリーンショットです

4

8 に答える 8

4

CSS でこれを行う 1 つの方法を示すCodePen の例を作成しましたborder-image。それはかなりよくサポートされており、CSS で探していることを実行します。

HTML:

<div class="fancy-border">
  my content
</div>

CSS:

.fancy-border {
  border: 4px solid;
  border-image: url("http://s12.postimg.org/kebji5qfd/border.png") 1 stretch repeat;
}

Chris Coyier は、CSS Tricks で border-image に関する素敵な投稿をしています。http://css-tricks.com/understanding-border-image/

于 2013-10-10T15:11:11.807 に答える
3

ラッパーは必要ありません。使用することで複数の「境界線」が可能ですbox-shadow

コードペンの例

#content {
  width:100px;
  height:100px;
  margin:25px;
  box-shadow:
  0 0 0 2px green,
  0 0 0 4px white, 
  0 0 0 6px blue,
  0 0 0 8px orange,
  0 0 0 10px green,
  0 0 0 12px red,
  0 0 0 14px blue;
  0 0 0 16px black;
}

微調整して調整できると確信しています。

于 2013-10-10T14:53:59.610 に答える
3

他の回答で述べたように、それを行う将来の方法はボーダーイメージになります。

より短期的な代替手段は、グラデーションを使用して疑似要素を使用することです。

CSS

.test {
  width: 500px;
  height: 100px;
  background-color: #ccc;
  position: relative;
}

.test:before, .test:after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  height: 10px;
  background-image: -webkit-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
  background-image: -ms-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
  background-size: 80px;
}

.test:before {
  top: 0px;
}
.test:after {
  bottom: 0px;
}

デモ

于 2013-10-10T18:03:52.353 に答える
2

の代わりに、 CSS3 グラデーションと組み合わせて使用​​することで、そのような効果を得るborder-colorことができます。border-image

たとえば、赤、青、黄、緑の間で水平方向にフェードする境界線を持つボックスを次に示します: http://jsfiddle.net/8d6dt/

div {
    border-image: -webkit-linear-gradient(left, red, blue 33%, yellow 66%, green) 1%;
    border-width: 20px;
    height: 200px;
    width: 200px;
}
于 2013-10-10T15:23:10.380 に答える
0

box-shadow を使用できますが、完全にはサポートされていません

http://jsfiddle.net/f7JT7/1/

box-shadow: 
  0  -5px 0 red,    0  5px 0 red,  
  0 -10px 0 yellow, 0 10px 0 yellow,
  0 -15px 0 green,  0 15px 0 green,
  0 -20px 0 purple, 0 20px 0 purple;

http://caniuse.com/css-boxshadow

于 2013-10-10T14:55:10.707 に答える
0

複数のボックス シャドウを使用できます。

    #wrapper {
        box-shadow: 0 0 0px 5px purple, 
        0px 0px 0px 10px goldenrod, 
        0px 0px 0px 15px blue, 
        0px 0px 0px 20px orange;
    }

例: http://jsfiddle.net/f7JT7/

于 2013-10-10T14:56:15.777 に答える