どうも！LSSです！！
に続き、虹色の枠線（border）を考えてみました。
虹色の枠線
border-imageはやはり手強いですが、だいぶ分かってきた…かも？
コード
<style>
.bdimg{
border:50px solid;
border-image:radial-gradient(at 50% 50%,transparent 14%,purple 15% 19%,blue 20% 24%,lightblue 25% 29%,green 30% 34%,yellow 35% 39%,orange 40% 44%,red 45% 49%,transparent 50%) 49%;
}
</style>
<div class="bdimg">虹色の枠線ができました^^<br />border-imageはやはり手強いですが、だいぶ分かってきた…かも？</div>
または、
<div style="border:50px solid;border-image:radial-gradient(at 50% 50%,transparent 14%,purple 15% 19%,blue 20% 24%,lightblue 25% 29%,green 30% 34%,yellow 35% 39%,orange 40% 44%,red 45% 49%,transparent 50%) 49%;">虹色の枠線ができました^^<br />border-imageはやはり手強いですが、だいぶ分かってきた…かも？</div>
borderの太さに準じて虹の太さも変わります！
<div style="border: 30px solid; border-image: radial-gradient(at 50% 50%,transparent 14%,purple 15% 19%,blue 20% 24%,lightblue 25% 29%,green 30% 34%,yellow 35% 39%,orange 40% 44%,red 45% 49%,transparent 50%) 49%;">border:30px solid;だと、こんな感じ。</div>
<div style="border: 90px solid; border-image: radial-gradient(at 50% 50%,transparent 14%,purple 15% 19%,blue 20% 24%,lightblue 25% 29%,green 30% 34%,yellow 35% 39%,orange 40% 44%,red 45% 49%,transparent 50%) 49%;">border:90px solid;だと、こんな感じ。</div>
…のように、赤太字部分を変更するだけで、虹の１色ごとの太さも変わります！
border-imageを使用しています
このブログ「Little Strange Software」において、CSSプロパティの「border-image」との格闘はもう２年越しのものとなりますｗ
とても分かり辛いのが、やっぱり結局「border-image-slice」。
今回のコードでいうと、
border-image:radial-gradient(at 50% 50%,transparent 14%,purple 15% 19%,blue 20% 24%,lightblue 25% 29%,green 30% 34%,yellow 35% 39%,orange 40% 44%,red 45% 49%,transparent 50%) 49%;
この「49%」の箇所ですが、もしかすると今回のように「%」単位で指定するのが無難なのかも、と思うようになりました。
【CSS】画像を使った枠線（border-imageとborder-image-slice使用） - Little Strange Software
の時点で、その意味については既に分かってはいたのですが、これをgradient系でやろうとすると…単位が行方不明になりますｗ
それで、SVGとの組み合わせに逃げた事もありますが、
今一度、gradient系とborder-imageでの表現に挑戦してみようかな、という気になってきました！
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
