В настоящее время я использую border-image на веб-сайте для отображения более красивого текстового поля.
Но свойство border-image имеет другое поведение с использованием firefox, чем в chrome, edge и safari .
.home_nopic {
padding: 15px;
min-height: 120px;
border-style: solid;
border-width: 5px 12px;
-moz-border-image: url('../img/content-body.png') 5 12 stretch stretch;
-webkit-border-image: url('../img/content-body.png') 5 12 stretch stretch;
-o-border-image: url('../img/content-body.png') 5 12 stretch stretch;
border-image: url('../img/content-body.png') 5 12 fill stretch stretch;
color: rgba(0, 0, 0,0.75);
font-family: 'Germania One', cursive;
font-size: 1.4em}
Для целей тестирования небольшой код, показывающий получаемую мной ошибку.
<html>
<body>
<div class="home_nopic" style="min-width=80%; font-size: 1.7em; text-shadow: 1px 1px 1px rgba(255, 217, 179, 0.6); padding: 15px; min-height: 120px; border-style: solid; border-width: 5px 12px; border-image: url('https://i.stack.imgur.com/mod4j.png') 5 12 fill stretch stretch; color: rgba(0, 0, 0,0.75); font-family: 'Germania One', cursive; font-size: 1.4em">
Lorem ipsum text
</div>
</body>
</html>
На chrome это выглядит так
А в firefox я получил это
content-body
Что я сделал не так?
Спасибо за помощь;)