3

1pxの線で構成されるCSS3グラデーションを作りたいです。

これどうやってするの？

次のコードを試しましたが、生成されるグラデーションが濃すぎます。

background-image: linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 51%);

（こちらをご覧ください）

線を小さくして幅を 1 ピクセルにするにはどうすればよいですか? パーセンテージ値は線の位置を制御しているようですが、どれだけ調整しても1px幅にはなりません!

(本質的に、私は線を「偽の列」の背景として機能させるために使用しています [つまり、左と右の列を視覚的に分離します。(ただし、jsFiddle をシンプルに保つために、列を削除しました)] 他の方法があることを知っています列を行う方法ですが、この方法が私の状況に最適です)

編集: 明確にするために、これは幅が 100% である必要があり、疑似要素を使用できない、少し奇妙なユースケース用です。

4

4 に答える 4

7 
/* Opera Mobile */
background: -o-linear-gradient(left, #d1d1d1 1px, white 1px);
/* Firefox for Android */
background: -moz-linear-gradient(left, #d1d1d1 1px, white 1px);
/* WebKit browsers */
background: -webkit-linear-gradient(left, #d1d1d1 1px, white 1px);
/* new syntax: IE10, Firefox, Opera */
background: linear-gradient(90deg, #d1d1d1 1px, white 1px);
background-position: 100% 0;
background-repeat: repeat-y;
background-size: 50%;

デモ

【デモでは見えなかったので2px代わりに使用しました。ただし、Chromeでのみテストしました。]1px1px

接頭辞なしのバージョンは常に最後に置く必要があります。の必要はありません-ms-linear-gradient。IE10 はプレフィックスなしの標準構文をサポートするようになり、IE9 はグラデーションをまったくサポートしません。

于 2013-01-26T01:32:08.183 に答える
3 
.style {        
    background-image: -o-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
    background-image: -moz-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
    background-image: -webkit-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 0%, rgb(255,255,255) 50.5%);
    background-image: linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
}

ピクセルを扱っているのではなく、パーセンテージを使用しています。したがって、幅の 1% (200 である必要があります) は 2px です。（これが機能する理由だと思います。おそらく私が間違っているかもしれません。）パーセンテージの小数を使用できるため、.5% == 1px.

于 2013-01-26T02:45:33.363 に答える