コピペで使えるCSSのborder-image-sourceでグラデーション境界線デザイン

CSSのborder-image-sourceでボーダー（縁）にグラデーションを適用する

ボーダーに線形グラデーションを適用

<div class="base lg">線形グラデーション</div>
<style>
.base{
  max-width:100%;  width:600px；
}
.lg{
  border:2px solid;
  border-image-slice:1;
  border-image-source:linear-gradient(135deg,yellow,green)
}
</style>

ボーダーに扇型グラデーションを適用(IE不可)

ボーダーに扇型グラデーションを適用させる

<div class="base cg">扇型グラデーション</div>
<style>
.base{
  max-width:100%;  width:600px;
}
.cg{
  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>