border-image-width в css

Вот как MDN объясняет border-image-width.border-image-width в css

Свойство CSS-изображения ширины границы определяет ширину границы изображения , определяя внутренние смещения от границ границ. Если ширина границы изображения больше ширины границы, то изображение границы выходит за пределы края заполнения (и/или содержимого).

Что не означает, что произойдет, если ширина границы будет меньше ширины границы?

Я сделал пример. Рана его на хром 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>

Border изображение используется:

Результат:

Итак, как вы видите сплошная черная рамка скрыта, хотя она составляет 40 пикселей, а ширина boder-image составляет 10 пикселей. Может ли кто-нибудь объяснить это?

источник

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

border-image-width в css

ответ

Смежные вопросы