CSSのborder-image-outset

これは、MDNがborder-image-outsetを定義する方法です。CSSのborder-image-outset

border-image-outsetプロパティは、境界線の枠を越えて境界線がどのくらいの量であるかを示します。私は

を理解何

今、私のイメージは、エリアの境界線像当初+ボーダー幅+ boder画像幅をカバーします。

私の例では、私の理解が間違っていることがわかります。単純化するために、私はborder-image-widthを定義しません。 border-width + border-image-outsetを使用します。しかし、実際の境界がどこにあるのかを知るためにアウトライン簡約プロパティを使用します。使用

境界画像：

コード：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Border-image-width</title> 
    <style> 

     p.ShowingBorderImageOutsetExample{ 
      border: 1px solid black; 
      width:500px; 
      border-image-source: url("1.png"); 
      border-image-slice: 20%; 
      border-image-outset: 6; 
      outline: 1px solid black; 
     } 

    </style> 
</head> 
<body> 
<p class="ShowingBorderImageOutsetExample">Hi this is just a demo</p> 
</body> 
</html>

出力以下の通りである：

黒線はアウトラインです。色付きの線は画像の境界線です。

画像の境界線が7px（境界線の6px +境界線の1px）の幅をカバーするのに対して、出力の1pxしかカバーしないというのは疑問です。

出典

2017-02-17 Breaking Benjamin

border-image-outsetプロパティは、境界画像領域が境界ボックスを越えて延びているが、そのサイズを定義していない、 border-width/border-image-widthはそれを何分だけ説明しています。

border-image-widthの場合、ボーダーエッジから内向きオフセットを定義することによって、ボーダー画像の幅を定義します。 border-image-widthがborder-widthより大きい場合、ボーダーイメージはパディング（および/またはコンテンツ）エッジを超えて拡張されます。

それとも単に入れ、border-image-outsetはborder-widthとborder-image-widthは、その大きさ（ボーダーの幅）を定義し、国境を拡張する必要がありますどのように遠くまで定義されています。あなただけの1ピクセルの大きさ、および無border-image-width、それはそれがレンダリングされますどのように、そしてあなたが計6Pxそれを与える、と同じに最初に設定した場合、あなたは、最初pこれを買ってあげる国境を与えたので

。 2番目のでは、始まりが12pxで、border-image-widthが12pxに設定されているので、アウトラインまで完全にレンダリングされます。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Border-image-width</title> 
 
    <style> 
 

 
     p.ShowingBorderImageOutsetExample{ 
 
      border: 6px solid black; 
 
      width:500px; 
 
      border-image-source: url("https://i.stack.imgur.com/syjY3.png"); 
 
      border-image-slice: 20%; 
 
      border-image-outset: 6px; 
 
      outline: 1px solid black; 
 
      margin-left: 10px; 
 
     } 
 

 
     p.ShowingBorderImageOutsetExample2{ 
 
      border: 6px solid black; 
 
      width:500px; 
 
      border-image-source: url("https://i.stack.imgur.com/syjY3.png"); 
 
      border-image-slice: 20%; 
 
      border-image-width: 12px; 
 
      border-image-outset: 12px; 
 
      outline: 1px solid black; 
 
      margin-left: 10px; 
 
     } 
 

 
    </style> 
 
</head> 
 
<body> 
 
<p class="ShowingBorderImageOutsetExample">Hi this is just a demo</p> 
 
<p class="ShowingBorderImageOutsetExample2">Hi this is just a demo</p> 
 
</body> 
 
</html>

出典

2017-02-17 15:11:23 LGSon

私はまだあなたを取得できませんでした申し訳ありません。 Border-image-outsetは、画像が境界線を越えて広がることができるより多くのスペースを定義します。今、私の例では、border-width 1pxを定義しました。私の例では、border-image-widthのデフォルト値は1で、border-image-outsetは6 = 6pxです。したがって、イメージは、領域7px（外側6px +境界1px）で伸ばされるべきですか？議論を簡略化するために、今はコーナーとそのすべてを無視してください。 –

@BreakingBenjamin 'border-image-outset'はスペースを定義しませんが、borderをどのくらい伸ばしていくかを定義します。border-widthとborder-image-widthは、 – LGSon

答えて

関連する問題