2

右から左に向かう下のグラデーションを実行しようとしています。私はこれを機能させていますが、私には意味がなく、小さな変更で奇妙なことが起こります。

右から左へ右勾配を与える

-webkit-border-image: -webkit-gradient( linear, 100% 100%, 0 0, from( #000000 ), to( #ffffff) ) 0 0 100% 0;
border-bottom-width: 5px;

これにより、DIV の背景にグラデーションが配置されます。

-webkit-border-image: -webkit-gradient( linear, 100% 100%, 0 0, from( #000000 ), to( #ffffff) ) 0 0 0 0;
border-bottom-width: 5px;

私が理解していることと理解していないことは次のとおりです。

specから、それはピースを言います：

-webkit-border-image: <function> <top> <right> <bottom> <left>

これを意味します：

<top> The distance from the top edge of the image.
<right> The distance from the right edge of the image.
<bottom> The distance from the bottom edge of the image.
<left>  The distance from the left edge of the image.

つまり、私の最初のもの0 0 100% 0は、下から 100%離れた境界イメージ (つまり、グラデーション) を持つ必要があります! しかし、それは逆です。代わりに、下の境界線のグラデーションを示すのはこれだけなので、実際には下から 0 離れています。

そして、0これらすべての値を設定すると、グラデーションが div の背景になるのはなぜですか? 実際、div に がある場合background-color、ボーダー画像の上、右、下、左をすべて 0 に設定すると、背景色の上にボーダーグラデーションが描画されます。

これはどのように機能しますか？

実際の例 (異なる値に変更できます)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Abbott RealTime</title>
        <style>
            .test
            {
                position: relative;
                top: 0px;
                left: 0px;
                width: 300px;
                height: 200px;
                margin:0;
                padding:0;
                border:0;
                outline:0;
                font-size:100%;
                vertical-align:baseline;
                background:transparent;
                background-color: #ffcc33;
                /* This shows the bottom border properly */
                -webkit-border-image: -webkit-gradient( linear, 100% 100%, 0 0, from( #000000 ), to( #ffffff) ) 0 0 100% 0;

                /* This one would show the gradient in the background and the border as the background color! */
                /*-webkit-border-image: -webkit-gradient( linear, 100% 100%, 0 0, from( #000000 ), to( #ffffff) ) 0 0 100% 0;*/

                border-bottom-width: 5px;
            }
        </style>
    </head>
    <body>
        <div class="test">test</div
    </body>
</html>
4

1 に答える 1

0

仕様から間違っているのは、 -webkit-border-image が提供された画像に穴を「切る」と想定していることです(最後に、提供されたグラデーションが画像として使用されています)。つまり、画像を 9 ピースにカットすると (横に 3 つ、縦に 3 つにカットされます)、コーナーはコーナーで使用され、エッジはエッジで使用され、中央のピースは破棄されます。

これは間違っています。中央のピースは中央で使用されます。背景を上書きしたくない場合は、透明にするのはあなたの責任です。

あなたのコメントについて、私は何が起こるかを見ることができるようにデモを用意しました. あなたの例はどちらも制限のあるものです。デモでは、何が起こるかをより簡単に確認できるように背景を設定しました。参考までに右に示します。そして中間では、100% から 0% に移行します。

追加されたデモ

.test1 {
    left: 0px;
      /* This shows the bottom border properly */
    -webkit-border-image: linear-gradient(45deg, black, transparent, red) 0% 0% 100% 0%;
}

.test2 {
    left: 320px;

/* これは、背景のグラデーションと境界線を背景色として表示します! */

    -webkit-border-image: linear-gradient(45deg, black, transparent, red) 0% 0% 0% 0%;
    -webkit-transition: all 5s;
}
.test2:hover {
    left: 320px;
    -webkit-border-image: linear-gradient(45deg, black, transparent, red) 0% 0% 100% 0%;
}

.bg {
    left: 640px;
    background: linear-gradient(45deg, black, transparent, red);
}

より具体的には、このパーセンテージは、背景画像のどの部分を下部として使用するかを指定します。100% を指定すると、すべての画像が下部に表示されます。（そして、中段と上段は画像が残っていません）。そこでグラデーションが圧縮されている様子がわかります。0% を指定すると、下部の画像は何も取得されません。

于 2013-06-20T20:41:25.567 に答える