web-dev-qa-db-ja.com

奇妙なグラデーション枠効果

linear-gradientを背景として要素に透明な境界線を適用すると、奇妙な効果が出ます。

enter image description here

要素の左側と右側に適切な色がなく（何らかの方法で切り替えられている）、奇妙にflatになっていることに注意してください。

[〜＃〜] html [〜＃〜]

<div class="colors">
</div>

[〜＃〜] css [〜＃〜]

.colors {
    width: 100px;
    border: 10px solid rgba(0,0,0,0.2);
    height: 50px;
    background: linear-gradient(to right, 
        #78C5D6,
        #459BA8,
        #79C267,
        #C5D647,
        #F5D63D,
        #F08B33,
        #E868A2,
        #BE61A5);
}

なぜこれは要素の左側と右側に奇妙な効果を示しているのですか、そしてそれについて何ができますか？

これがフィドルです： http://jsfiddle.net/fzndodgx/3/

htmlcsslinear-gradients
71
Afonso Matos

これは、gradientの開始点と終了点がpadding-boxの端にあり、borderがpadding-boxの外側にレンダリングされるためです。したがって、padding-boxをカバーするためにborder-boxの外側の両側でbackgroundが繰り返されているため、境界線はおかしく見えます。

box-shadow:insetはpadding-box内に（背景と同じように）レンダリングされ、borderと視覚的に同じ効果が得られるため、borderの代わりに使用することができます。 ：

box-shadow: inset 0 0 0 10px rgba(0,0,0,0.2);
padding: 10px;

box-shadowはスペースをとらないため、それに応じてパディングを増やす必要があります。

padding-boxとborder-boxのイラスト： enter image description here

デモ http://jsfiddle.net/ilpo/fzndodgx/5/

50
Okku

解決

この問題を修正する最も簡単な方法は、background-Originプロパティの値をborder-boxとして設定することです。

.colors {
  width: 100px;
  border: 10px solid rgba(0, 0, 0, 0.2);
  height: 50px;
  background: linear-gradient(to right, #78C5D6, #459BA8, #79C267, #C5D647, #F5D63D, #F08B33, #E868A2, #BE61A5);
  background-Origin: border-box;
}
<div class="colors"></div>

問題となっている動作の理由

この場合の背景のグラデーションの表示方法を決定する関連するbackgroundプロパティは次のとおりです。

  • background-Origin -デフォルト値はpadding-boxです。これは、背景が実際にはパディングボックスを基準に配置されているため、borderの後ろから始まることを意味します。
  • background-repeat -これのデフォルト値はrepeatです。つまり、背景の描画領域全体をカバーするために、必要なだけ画像を繰り返す必要があります。
  • background-clip -これのデフォルト値はborder-boxです。これは、画像がボックスの境界線が占める領域の下にも存在する必要があることを意味します。

3つすべてを組み合わせると、ボーダーがボーダーの下にも表示されるように、ボーダーをできるだけ繰り返す必要があり、開始位置がボックスのボーダーの後ろにあることがわかります。これは、左側の境界線の下の領域を埋めるために、背景を循環的に繰り返す必要があることを意味します。このため、左の境界線はグラデーションの右端の色になり、その逆も同様です。

これをborder-boxに変更することにより、背景を境界ボックスに対して配置します。この設定背景画像のサイズにも影響しますとその理由を以下で詳しく説明します。

box-sizing: border-boxが機能しないのはなぜですか？

box-sizingをborder-boxとして設定しても、そのプロパティはボックスのサイズにのみ影響するため、変更はありません。次のものにはまったく影響しません。

  • グラデーション画像のサイズ（実際の計算ロジックは以下で説明します）
  • グラデーション画像の開始点（または位置）
  • 背景画像の繰り返し

グラデーションのサイズはどのように計算されますか？

W3C spec のとおり、明示的なサイズが指定されていない場合の画像の寸法の計算方法を以下に示します（デフォルト値はauto）。

imageに固有の幅も固有の高さもない場合、そのサイズは「含む」のように決定されます

画像のサイズではなく、ボックスのサイズについて説明していることに注意してください。本質的に、ボックスのサイズに関係なく、背景画像のサイズは、画像自体に固有の高さがない場合、キーワードcontainの定義に基づいて計算されます（ CSSグラデーションには、画像とは異なります ）。

containの定義は次のとおりです。

固有のアスペクト比（ある場合）を維持しながら、幅と高さの両方が背景の配置領域に収まるように画像を最大サイズに拡大縮小します。

背景配置領域は次のように定義されます（background-Originプロパティ定義の下）：

単一のボックスとしてレンダリングされる要素の場合、背景の配置領域を指定します

したがって、画像に固有の高さがない場合（この場合はbackground-sizeもありません）、画像のサイズはbackground-Originの値（この場合はpadding-box）のサイズと等しくなります。

これがbox-sizingをborder-boxとして設定しても効果がない理由です。

注：引用テキスト内の強調はすべて私のものです

ボックスのサイズとしてbackground-sizeを明示的に設定すると、右側ではなく左側では問題がどのように解決されるかがわかります。これは、画像が右の境界の下で繰り返さないほど十分に大きいが、その開始点が左の境界の後にあるためです。

.colors {
  width: 100px;
  border: 10px solid rgba(0, 0, 0, 0.2);
  height: 50px;
  background: linear-gradient(to right, #78C5D6, #459BA8, #79C267, #C5D647, #F5D63D, #F08B33, #E868A2, #BE61A5);
  background-size: 110px 60px;
}
.colors-2 {
  width: 100px;
  border: 10px solid rgba(0, 0, 0, 0.2);
  height: 50px;
  background: linear-gradient(to right, #78C5D6, #459BA8, #79C267, #C5D647, #F5D63D, #F08B33, #E868A2, #BE61A5);
  box-sizing: border-box;
  background-size: 100px 50px;
}
<div class="colors">
</div>
<div class="colors-2">
</div>
43
Harry

背景は境界の下で繰り返されます。背景は要素の「本体」内でのみ実行され、境界の下は拡張であり、繰り返しが発生し始めます。

ボーダーにno-repeatを使用した this の例を参照してください。

[〜＃〜]更新[〜＃〜]

背景position＆sizeで遊んでみると、背景を拡大して位置を調整することができます。

チェック このフィドル アウト。

またはスニペットを参照してください：

.colors {
  padding: 10px;
  width: 100px;
  border: 10px solid rgba(0, 0, 0, 0.2);
  height: 50px;
  background: linear-gradient(to right, #78C5D6, #459BA8, #79C267, #C5D647, #F5D63D, #F08B33, #E868A2, #BE61A5);
  background-size: 117%;
  background-position-x: 130px;
}
<div class="colors"></div>
13
JNF

background-Origin プロパティのデフォルト値はpadding-boxです。これは、背景がパディングボックスに対して相対的に配置およびサイズ設定されることを意味します。

background-clip プロパティのデフォルトはborder-boxなので、背景も境界線の下に広がります。境界の下で繰り返されます。このため、背景の右側が左の境界線の下に表示され、逆も同様です。

したがって、オリジンを変更するだけです。

.colors {
  width: 100px;
  border: 10px solid rgba(0, 0, 0, 0.2);
  height: 50px;
  background: linear-gradient(to right, #78C5D6, #459BA8, #79C267, #C5D647, #F5D63D, #F08B33, #E868A2, #BE61A5);
  background-Origin: border-box;
}
<div class="colors"></div>

あるいは、背景のサイズと位置で遊ぶことができます。背景のサイズに20pxを追加して、-10px -10pxに配置します。

.colors {
  width: 100px;
  border: 10px solid rgba(0, 0, 0, 0.2);
  height: 50px;
  background: linear-gradient(to right, #78C5D6, #459BA8, #79C267, #C5D647, #F5D63D, #F08B33, #E868A2, #BE61A5);
  background-position: -10px -10px;
  background-size: calc(100% + 20px) calc(100% + 20px);
}
<div class="colors"></div>
4
Salman A

他の回答は既に問題の修正方法を示していますが、border-width背景が実際に繰り返されていることが明らかになります。

.colors {
    width: 100px;
    border: 100px solid rgba(0,0,0,0.2);
    height: 50px;
    background: linear-gradient(to right, 
        #78C5D6,
        #459BA8,
        #79C267,
        #C5D647,
        #F5D63D,
        #F08B33,
        #E868A2,
        #BE61A5);
}

生成されます

enter image description here

4
mflodin

グラデーションは、デフォルトのCSSボックスモデルの動作に従ってパディングボックス内で開始されるため、グラデーションの両側の境界が無限になるまで、最初と最後の色が表示されるのは理にかなっています。

この勾配（NSFW）についても同様です。

A GOD AWFUL EYE SORE

左側の開始値（紫）で無限に続き、右側の終了値（オレンジ）で無限に続きます。それはこの勾配で無限に上向きに続くことができるので、そうします。

これがなぜこのように表示されるかについての私の理解です。別のボックスモデルを使用するソリューションが考えられます。

4
bitten

box-shadowを使用したくない場合は、border-imageを使用してグラデーションの色を調整できます。 http://jsfiddle.net/9pcuj8bw/5/

.colors {
    width:100px;
    height: 50px;
    background: linear-gradient(to right, 
        #78C5D6,
        #459BA8,
        #79C267,
        #C5D647,
        #F5D63D,
        #F08B33,
        #E868A2,
        #BE61A5) no-repeat;
    border: 10px solid;
    border-image: linear-gradient(to right, 
        #0bc3b8,
        #068e8c,
        #f8c617,
        #ea5f24,
        #b2492c) 1;
}
<div class="colors"></div>

CarefulこれはIE10以下では機能しません： http://caniuse.com/#feat=border-image

3
Wavemaster

その正常に動作しています。あなたはブロックに透明な境界線を使用していたので、bg-colorが見えました。線形グラデーションなので、左側と右側が単色になります。無地の境界線を使用すると、適切な効果を確認できます。 http://prntscr.com/7mo5jm

0
Kumar