CSSのborder-image-sourceでボーダー（縁）にグラデーションを適用する
CSSでボーダーにグラデーションを適用したいけれど、`background-image`ではうまくいかない──そんなときに使えるのが `border-image-source` プロパティです。
このページでは、線形グラデーション（linear-gradient）や扇型グラデーション（conic-gradient）を使って、ボーダーに色の変化を与える方法を、静的な表示からアニメーション、JavaScriptによる制御まで、実例付きで紹介します。
CSSだけでは難しい滑らかなアニメーションも、JavaScriptを使えば実現可能です。
ボーダーに線形グラデーションを適用
ボーダーに線形グラデーションを適用
<div class="lg">線形グラデーション</div>
<style>
.lg{
max-width:100%; width:600px；
border:2px solid;
border-image-slice:1;
border-image-source:linear-gradient(135deg,yellow,green);
}
</style>
ボーダーに線形グラデーションでアニメーション適用
ボーダーに線形グラデーションを適用
（滑らかには動かないので下にあるJavascript版を推奨）
（滑らかには動かないので下にあるJavascript版を推奨）
<div class="border-ani">線形グラデーション＋アニメーション</div>
<style>
.border-ani{
max-width:100%;
width:600px;
border:2px solid;
border-image-slice:1;
animation: border-ani 2.0s linear 0.0s infinite normal both running;
}
@keyframes border-ani{
0%{border-image-source:linear-gradient(0deg,yellow,green);}
10%{border-image-source:linear-gradient(36deg,yellow,green);}
20%{border-image-source:linear-gradient(72deg,yellow,green);}
30%{border-image-source:linear-gradient(108deg,yellow,green);}
40%{border-image-source:linear-gradient(144deg,yellow,green);}
50%{border-image-source:linear-gradient(180deg,yellow,green);}
60%{border-image-source:linear-gradient(216deg,yellow,green);}
70%{border-image-source:linear-gradient(252deg,yellow,green);}
80%{border-image-source:linear-gradient(288deg,yellow,green);}
90%{border-image-source:linear-gradient(324deg,yellow,green);}
100%{border-image-source:linear-gradient(360deg,yellow,green);}
}
</style>
ボーダーに扇型グラデーションを適用(IE不可)
ボーダーに扇型グラデーションを適用させる
<div class="cg">扇型グラデーション</div>
<style>
.cg{
max-width:100%; width:600px;
border:2px solid;
border-image-slice:1;
border-image-source:conic-gradient(from -45deg,yellow,green,yellow);
}
</style>
ボーダーに扇型グラデーションをアニメーション表示させる(IE不可)
<script>
TMamBorderConicAnimation=function(elms,colors,width,stepDeg){
this.deg=0; //最初の角度
this.stepDeg=stepDeg;//回転角度のインクリメント値
this.colors=colors; //線形画像の色のパターン
this.timer=null;
this.elms=elms;
this.width=width;
this.ani=function(){
for(let i=0;i<elms.length;i++){
elms[i].style.borderImageSlice='1';
elms[i].style.borderImageSource='conic-gradient(from '+this.deg+'deg at 50% 50%, '+this.colors+')';
}
this.deg+=this.stepDeg;
if(this.deg>=360){this.deg=0;};
}
this.init=function(){
for(let i=0;i<elms.length;i++){
elms[i].style.border=this.width+" solid";
}
this.timer=setInterval(this.ani.bind(this),33);
}
this.init();
}
</script>
<style>
.base{
max-width:100%; width:400px;
}
</style>
使用例1
例1
<div class="cg1">例1<div>
<script>
window.addEventListener('DOMContentLoaded',function(){
MamBorderAnimation=new TMamBorderConicAnimation(
document.querySelectorAll(".cg1"),
"yellow,green,yellow", //グラデーションパターン
"2px", //ボーダーの太さ
8 //回転速度(deg)
);
});
</script>
使用例2
例2
<div class="cg2">例2<div>
<script>
window.addEventListener('DOMContentLoaded',function(){
MamBorderAnimation=new TMamBorderConicAnimation(
document.querySelectorAll(".cg2"),
"cyan,magenta,yellow,cyan",//グラデーションパターン
"2px", //ボーダーの太さ
4 //回転速度(deg)
);
});
</script>
使用例3
例3
<div class="cg3">例3<div>
<script>
window.addEventListener('DOMContentLoaded',function(){
MamBorderAnimation=new TMamBorderConicAnimation(
document.querySelectorAll(".cg3"),
"white,black,black,black,black,black,white",//グラデーションパターン
"1px", //ボーダーの太さ
2 //回転速度(deg)
);
});
</script>
使用例4
例4
<div class="cg4">例4<div>
<script>
window.addEventListener('DOMContentLoaded',function(){
MamBorderAnimation=new TMamBorderConicAnimation(
document.querySelectorAll(".cg4"),
"white,silver,silver,silver,silver,white",//グラデーションパターン
"4px", //ボーダーの太さ
8 //回転速度(deg)
);
});
</script>