どうも！LSSです！！
未だ掴みきれないborder-image。
ちょいと試しに「border-image-sliceはkeyframesでアニメーションにできるのか？」を試してみました。
実験
呼吸してるみたい
コード
<style>
@keyframes testa{
0%{border-image-slice:49%;}
100%{border-image-slice:35%;}
}
.test{
height:200px;
border:40px solid;
border-image-source:radial-gradient(farthest-side,transparent 59%,gray 60%,white,gray 89%,transparent 90%);
animation:testa 3s infinite alternate;
}
</style>
<div class="test">呼吸してるみたい</div>
アニメ化できましたね！
クラス名とかテキトーですが^^;。
gradient系の ( ) の内容はアニメーションにならないですが、それ以外の指定部分は結構 融通が利くようです。
他にもborder-imageで色々試してはいるのですが…「複数の画像を重ねられない」「gradient系のサイズを固定できない」あたりが、本当にできないのかな？と未練がましく試していたりしますｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
