国境-画像スライススワップ水平方向と垂直方向のparams

Question

：

.test { 
    border-style: solid; 
    border-width: 1px; 
    border-image-source: linear-gradient(to bottom, hsl(0, 0%, 97%), hsl(19, 0%, 75%), hsl(0, 0%, 97%)); 
    border-image-slice: 100% 1%; 
} 

それは動作します。しかし、Chromeでのみ。 Chrome

Firefoxの行はスワップ方向にあります。それらは垂直になります： FF

"border-image-slice：100％1％;"を変更すると、 〜 "bo​​rder-image-slice：1％100％;"ブラウザもエフェクトを変更します。

多分誰かがそれに対処しますか？多分私は何かを忘れた？クロスブラウザーのソリューションが存在する可能性があります。

Answer 1

問題のCSSは、CodePenで出力を生成するために使用したCSS全体ではありません。あなたが将来それへのリンクを提供したなら、それは役に立つでしょう。以下では、問題を再現できません。私は両方のブラウザで二つの水平側面を取得するので、私は問題は、他のCSSである疑いがある：

HTML

<div class="repeating-linear"> 
</div> 

CSS

* { 
    box-sizing: border-box; 
} 

body { 
    background-color: #000000; 
} 

.repeating-linear { 
    width: 500px; 
    height: 500px; 
    border-style: solid; 
    border-width: 1px; 
    border-image-source: linear-gradient(to bottom, hsl(0, 0%, 97%), 
     hsl(19, 0%, 75%), hsl(0, 0%, 97%)); 
    border-image-slice: 100% 1%; 
} 

参照：https://jsfiddle.net/0j745Lzm/1/