エレメントに2つの異なる線形グラデーションボーダーを実装する方法は？

Question

私はCSSで本当に新しく、以下の画像のようにdivの境界線として2線形勾配を作成する作業があります。

私はborder-imageを内側のものに使用しましたが、他の境界線を作成する方法はわかりません。

余分な擬似要素を使って

border-image: linear-gradient(#EEEEEE ,#666666, #EEEEEE) 1 1% !important; 

Answer 1

：

私はそれだけで一つの要素（つまり、余分な擬似/実数要素でこれを行うことが可能であるとは思いません）border-imageを使用してください。しかし、スニペットのように擬似要素を使用して、親に1つの境界線を設定し、疑似要素にもう1つの境界線を設定することができます。単一の要素の使用

div{ 
 
    position: relative; 
 
    height: 200px; 
 
    width: 400px; 
 
    border-image-source: linear-gradient(to bottom, #FFFFFF, #CCCCCC 50%, #FFFFFF); 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    border-image-slice: 1; 
 
} 
 
div:before{ 
 
    position: absolute; 
 
    content: ''; 
 
    height: calc(100% - 10px); 
 
    width: calc(100% - 10px); 
 
    border-image-source: linear-gradient(to bottom, #EEEEEE, #666666 50%, #EEEEEE); 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    border-image-slice: 1; 
 
}

<div></div>

---

：ただ一つの要素（なし擬似/実数要素）で

を、私たちは、ソートの使用この^*を達成することができますbackground-imageではなく、border-imageではありません。 8（4つの外側+ 4つの内側）罫線のそれぞれにグラデーションストリップを作成し、それに応じて配置する必要があるため、もっと複雑です。

^{* - これは、border-imageとまったく同じ出力を生成しませんが、十分に近いです。}

div{ 
 
    height: 200px; 
 
    width: 400px; 
 
    background: linear-gradient(to right, #FFFFFF, #FFFFFF), 
 
    linear-gradient(to bottom, #FFFFFF, #CCCCCC 50%, #FFFFFF), 
 
    linear-gradient(to right, #FFFFFF, #FFFFFF), 
 
    linear-gradient(to bottom, #FFFFFF, #CCCCCC 50%, #FFFFFF), 
 
    linear-gradient(to right, #EEEEEE, #EEEEEE), 
 
    linear-gradient(to bottom, #EEEEEE, #666666 50%, #EEEEEE), 
 
    linear-gradient(to right, #EEEEEE, #EEEEEE), 
 
    linear-gradient(to bottom, #EEEEEE, #666666 50%, #EEEEEE); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 5px, 5px 100%, 100% 5px, 5px 100%, calc(100% - 10px) 5px, 5px calc(100% - 10px), calc(100% - 10px) 5px, 5px calc(100% - 10px); 
 
    background-position: 0px 0px, 100% 0px, 0px 100%, 0px 0px, 5px 5px, calc(100% - 5px), 0px calc(100% - 5px), 5px 5px; 
 
}

<div></div>