2

かなり長い間、私は解決策を見つけようとしてきましたが、成功していません。うまくいけば、この周りの誰かが私を助けてくれるでしょう。

クロスブラウザーで動作させるには、-webkit、-moz などを使用する必要があることを理解するようになりました。

-moz 構文を正しくする方法を見つけることに成功しましたが、対応する -webkit 構文を見つけることができません。

また、多くの人が背景グラデーションを好むことに気付きましたが、背景グラデーションジェネレーターを使用しても、以下を再現できません。

私が話しているボーダーグラデーションは次のとおりです。

-moz-border-left-colors: #181818 #181818 #181818 #181818 #181818 #181818 #181818 #383838 #383838 #383838 #585858 #585858 #585858 #787878 #787878 #787878 #B8B8B8 #B8B8B8 #B8B8B8 #D8D8D8 #D8D8D8 #D8D8D8 #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF;
-moz-border-right-colors: #181818 #181818 #181818 #181818 #181818 #181818 #181818 #383838 #383838 #383838 #585858 #585858 #585858 #787878 #787878 #787878 #B8B8B8 #B8B8B8 #B8B8B8 #D8D8D8 #D8D8D8 #D8D8D8 #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF;

サイトは次のようになります: http://postimg.org/image/qeonchwpd/

そのスクリーンショットに見られる他の間違いは無視してください。簡単に修正できます。それは私が仕事をすることができない境界線のグラデーションです。

ご覧のとおり、小さなボックスの周りにグラデーションの境界線を付けようとしているのではなく、ページ全体の左右にグラデーションを付けようとしています! グラデーションは黒からゆっくりと白へ、そして再び黒へと変化します。

これを -webkit ブラウザや他のブラウザで動作させるのを手伝ってくれる人はいますか? スクリーンショットよりも見栄えを良くするための提案も常に高く評価されています!

よろしくお願いします！

4

2 に答える 2

1

おそらく、ボーダーの使用を完全に放棄し、div 全体の背景グラデーションの観点から考える必要があります。

div にパディング (たとえば 6%) を設定すると、パディングが終了する直前に終了するカラー ストップを使用して、左から右に (または逆方向に戻る... 関係ありません) リニア グラデーションを適用できます。

JSFiddleデモ

HTML

<div class="main"> Any content  </div>

CSS

.main {
    width:75%; /* not required */
    margin:0 auto; /* not required */
    height:1000px; /* not required */
    color:white; /* not required */

    /* the important bits */

    background:linear-gradient(to right, black, white 5%, black 5%, black 95%, white 95%, black);
    padding:6%; ?just a little more than the color stop values)

}
于 2013-11-01T13:29:46.030 に答える
0

については聞いたことがありません-webkit-border-left-colors。私は見ただけborder-left-colorです。

構文 border-left-color は、Webkit ブラウザーである chrome で機能します。-webkit を追加する必要はありません。

これ-moz-border-left-colors:は、mozilla ブラウザにのみ適用されるプロパティです。したがって、これに代わる Webkit はありません。フィドルをチェックhttp://jsfiddle.net/aWXmr/

編集:これを行うには、いくつかの代替手段があります。CSS3 を使用した可能な解決策については、この質問を参照してください。

于 2013-11-01T13:20:47.550 に答える