css中的border-image-width

這就是MDN如何解釋border-image-width。css中的border-image-width

border-image-width CSS屬性通過定義邊界邊緣的內部偏移量來定義邊界的寬度。如果邊框圖像寬度大於邊框寬度，則圖像邊框將延伸到填充（和/或內容）邊緣之外。

它沒有告訴的是，如果border-image-width小於邊框寬度會發生什麼？

我做了一個例子。然其上的鍍鉻56.下面是代碼：圖像使用

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Border Image</title> 
    <style> 
     p.checkBorderImageWidth{ 
      border: 40px solid black; 
      width:500px; 
      border-image-source: url("1.png"); 
      /* Note that now border-image-slice defaults to 100% */ 
      border-image-width: 10px; 
      outline: 1px solid black; 
     } 

    </style> 
</head> 

<body> 
    <p class="checkBorderImageWidth">Hi this is just a demo</p> 
</body> 

</html>

邊界是：

結果是：

所以，你看黑色邊框是隱藏的，儘管它是40px，而boder-image-width是10px。任何人都可以解釋嗎？

來源

2017-02-16 Breaking Benjamin

邊界圖像是用來代替「正常」的邊界：

來源：https://www.w3schools.com/cssref/css3_pr_border-image.asp

的border-image屬性允許您指定圖像中使用而不是正常的邊境左右一個元素。

您的引用解釋說，如果border-image-width > border-width的邊框圖像將覆蓋填充和最終容器的內容。

例如：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Border Image</title> 
    <style> 
     p.checkBorderImageWidth{ 
      border: 40px solid black; 
      width:500px; 
      border-image-source: url("1.png"); 
      /* Note that now border-image-slice defaults to 100% */ 
      border-image-width: 10px; 
      outline: 1px solid black; 
     } 

     p.checkBorderImageWidth2{ 
      border: 100px solid black; 
      width:500px; 
      border-image-source: url("1.png"); 
      /* Note that now border-image-slice defaults to 100% */ 
      border-image-width: 30px; 
      padding: 5px; 
      outline: 1px solid black; 
    } 

    </style> 
</head> 

<body> 
    <p class="checkBorderImageWidth">Hi this is just a demo</p> 
    <p class="checkBorderImageWidth2">The border covers the text.</p> 
</body> 

</html>

這裏邊框覆蓋文本：

來源

2017-02-16 14:43:05 Sylvain

css中的border-image-width

回答

相關問題