css唯美边框

<div class="gradient-border" id="box">Animated <br>CSS<br>Gradient Border</div>

html, body {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #1D1F20;
}
#box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 200px;
  color: white;
  font-family: 'Raleway';
  font-size: 2.5rem;
}
.gradient-border {
  --borderWidth: 3px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidth);
}
.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}


@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

 

<div class="container">
    <div class="background-img">
      <div class="box">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div class="content">
          <h2>My animated Border </h2>
          <p><a>All our modules are designed to play nicely with responsive of course. At the end of the day it comes down to the theme you use - our code doesn't get in your way.</a></p>
        </div>
        
      </div>
    </div>
  </div>

*{
  margin:0;
  padding:0;
}

.container{  padding-top: 20px;
  padding-bottom: 20px;}
body{
  background-color: #111845;
}

.background-img{
  background-image: url("https://3.bp.blogspot.com/-piZWCW2uUbg/W2fPXxkWZgI/AAAAAAAAOu0/eydmMjTIqcwLMHEEr2H7imqoRTxMw4o9QCLcBGAs/s1600/among_trees_night_dribbble.png");
height: 400px;
  width: 800px;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 5% auto;
  padding:20px;
  border: 1px solid #2a3cad;
  border-radius: 4px;
  box-shadow: 0px 0px 5px #2a3cad;
  position: relative;
}

.content h2{ font-size:19px;}

.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: #111845a6;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 20px 50px rgb(23, 32, 90);
  border: 2px solid #2a3cad;
  color: white;
  padding: 20px;
}

.box:before{
  content: '';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background: rgba(255,255,255,0.1);
  transition:0.5s;
  pointer-events: none;
}

.box:hover:before{
  left:-50%;
  transform: skewX(-5deg);
}


.box .content{
  position:absolute;
  top:15px;
  left:15px;
  right:15px;
  bottom:15px;
  border:1px solid #f0a591;
  padding:20px;
  text-align:center;
  box-shadow: 0 5px 10px rgba(9,0,0,0.5);
  
}

.box span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  
}

.box span:nth-child(1)
{
  transform:rotate(0deg);
}

.box span:nth-child(2)
{
  transform:rotate(90deg);
}

.box span:nth-child(3)
{
  transform:rotate(180deg);
}

.box span:nth-child(4)
{
  transform:rotate(270deg);
}

.box span:before
{
  content: '';
  position: absolute;
  width:100%;
  height: 2px;
  background: #50dfdb;
  animation: animate 4s linear infinite;
}

@keyframes animate {
  0% {
  transform:scaleX(0);
  transform-origin: left;
  }
  50%
  {
    transform:scaleX(1);
  transform-origin: left;
  }
  50.1%
  {
    transform:scaleX(1);
  transform-origin: right;
    
  }
  
  100%
  {
    transform:scaleX(0);
  transform-origin: right;
    
  }
  
  
} 

 

<h1>CSS Border Transitions</h1>
  
  <section class="buttons">
    <button class="draw">Draw</button>
  
    <button class="draw meet">Draw Meet</button>
  
    <button class="center">Center</button>
  
    <button class="spin">Spin</button>
  
    <button class="spin circle">Spin Circle</button>
  
    <button class="spin thick">Spin Thick</button>
  </section>

button {
      background: none;
      border: 0;
      box-sizing: border-box;
      margin: 1em;
      padding: 1em 2em;
      
      box-shadow: inset 0 0 0 2px #f45e61;
      color: #f45e61;
      font-size: inherit;
      font-weight: 700;
    
      position: relative;
      vertical-align: middle;
    }
    
    button::before,
    button::after {
      box-sizing: inherit;
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
    }
    
    .draw {
        transition: color 0.25s;
    }
    .draw::before,
    .draw::after {
      border: 2px solid transparent;
      width: 0;
      height: 0;
    }
    .draw::before {
      top: 0;
      left: 0;
    }
    .draw::after {
      bottom: 0;
      right: 0;
    }
    
    .draw:hover {
      color: #60daaa;
    }
    .draw:hover::before,
    .draw:hover::after {
      width: 100%;
      height: 100%;
    }
        
    .draw:hover::before {
      border-top-color: #60daaa; 
      border-right-color: #60daaa;
      transition:
        width 0.25s ease-out,
        height 0.25s ease-out 0.25s;
    }
        
    .draw:hover::after {
      border-bottom-color: #60daaa;
      border-left-color: #60daaa;
      transition:
        border-color 0s ease-out 0.5s,
        width 0.25s ease-out 0.5s,
        height 0.25s ease-out 0.75s;
    }
    
    
    
    .meet:hover {
      color: #fbca67;
    }
    .meet::after {
      top: 0;
      left: 0;
    }
        
    .meet:hover::before {
      border-top-color: #fbca67;
      border-right-color: #fbca67;
    }
        
    .meet:hover::after {
      border-bottom-color: #fbca67;
      border-left-color: #fbca67;
      transition:
        height 0.25s ease-out,
        width 0.25s ease-out 0.25s;
    }
    
    
    .center:hover {
      color: #6477b9;
    }
    .center::before,
    .center::after {
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      transform-origin: center;
    }
    .center::before {
      border-top: 2px solid #6477b9;
      border-bottom: 2px solid #6477b9;
      transform: scale3d(0,1,1);
    }
        
    .center::after {
      border-left: 2px solid #6477b9;
      border-right: 2px solid #6477b9;
      transform: scale3d(1,0,1);
    }
        
    .center:hover::before,
    .center:hover::after {
      transform: scale3d(1,1,1);
      transition: transform 0.5s;
    }
    
    
    .spin {
      width: 5em;
      height: 5em;
      padding: 0;
    }
    
    .spin:hover {
      color: #0eb7da;
    }
        
    .spin::before,
    .spin::after {
      top: 0;
      left: 0;
    }
        
    .spin::before {
      border: 2px solid transparent;
    }
        
    .spin:hover::before {
      border-top-color: #0eb7da;
      border-right-color: #0eb7da;
      border-bottom-color: #0eb7da;
        
      transition:
        border-top-color 0.15s linear,
        border-right-color 0.15s linear 0.10s,
        border-bottom-color 0.15s linear 0.20s;
    }
        
    .spin::after {
      border: 0 solid transparent;
    }
        
    .spin:hover::after {
      border-top: 2px solid #0eb7da;
      border-left-width: 2px;
      border-right-width: 2px;
      transform: rotate(270deg);
      transition:
        transform 0.4s linear 0s,
        border-left-width 0s linear 0.35s;
    }
    
    
    
    
    
    .circle {
      border-radius: 100%;
      box-shadow: none;
    }
    
    .circle::before,
    .circle::after {
      border-radius: 100%;
    }
    
    .thick {
      color: #f45e61;
    
    }
    .thick:hover {
      color: #fff;
      font-weight: 700;
    }
        
    .thick::before {
      border: 2.5em solid transparent;
      z-index: -1;
    }
        
    .thick::after {
      mix-blend-mode: color-dodge;
      z-index: -1;
    }
        
    .thick:hover::before {
      background: #f45e61;
      border-top-color: #f45e61;
      border-right-color: #f45e61;
      border-bottom-color: #f45e61;
      transition:
        background 0s linear 0.4s,
        border-top-color 0.15s linear,
        border-right-color 0.15s linear 0.15s,
        border-bottom-color 0.15s linear 0.25s;
    }
    .thick:hover::after {
      border-top: 2.5em solid #f45e61;
      border-left-width: 2.5em;
      border-right-width: 2.5em;
    }
    
    
    html {
      background: #fefefe;
    }
    
    body {
      background: #fefefe;
      color: #4b507a;
      font: 300 24px/1.5 Lato, sans-serif;
      margin: 1em auto;
      max-width: 36em;
      padding: 1em 1em 2em;
      text-align: center;
    }
    
    .buttons {
      isolation: isolate;
    }
    
    h1 {
      font-weight: 300;
      font-size: 2.5em;
    }

 

 

 

<div class="svg-wrapper">
  <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
    <rect class="shape" height="60" width="320" />
    <div class="text">ZACH SAUCIER</div>
  </svg>
</div>

html, body {
  background: rgb(20,20,20);
  text-align: center;
  height: 100%;
  overflow: hidden;
}
.svg-wrapper {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
	  margin: 0 auto;
  width: 320px;  
}
.shape {
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width: 8px;
  fill: transparent;
  stroke: #19f6e8;
  border-bottom: 5px solid black;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text {
  font-family: 'Roboto Condensed';
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 8px;
  color: #fff;
  top: -48px;
  position: relative;
}
.svg-wrapper:hover .shape {
  stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 760;
}

 

 

<h1>Hand-Drawn Border Buttons</h1>
 <section>
   <button class='lined thick'>Lined Thick</button>
   <button class='dotted thick'>Dotted Thick</button>
   <button class='dashed thick'>Dashed Thick</button>
 </section>
 <section>
   <button class='lined thin'>Lined Thin</button>
   <button class='dotted thin'>Dotted Thin</button>
   <button class='dashed thin'>Dashed Thin</button>
 </section>

 @import url(https://fonts.googleapis.com/css?family=Patrick+Hand+SC);
    *{
      box-sizing:border-box;
    }
    html, body{
      width:100%; 
      min-height:100%;
      margin:0;
      display:flex;
      flex-direction:column;
      justify-content:center;
      background:#F0F0D8;
      font-family: 'Patrick Hand SC', cursive;
    }
    h1{
      margin-top:-5rem;
      text-align:center;
      color:#41403E;
      font-size:3rem;
    }
    section{
      display:flex;
      flex-direction:row;
      justify-content:center;
      width:100%;
      min-height:100%;
      margin-bottom:3rem;
    }
    section button{
      align-self:center;
      background:transparent;
      padding:1rem 1rem;
      margin:0 1rem;
      transition:all .5s ease;
      color:#41403E;
      font-size:2rem;
      letter-spacing:1px;
      outline:none;
      box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
      border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    }
    section button:hover{
       box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
    } 
    section button .lined .thick{
       border:solid 7px #41403E;
    }
    section button .dotted .thick{
       border:dotted 5px #41403E;
    }
    section button .dashed .thick{
      border:dashed 5px #41403E;
    }
     section button .lined .thin{
       border:solid 2px #41403E;
    }
    section button .dotted .thin{
       border:dotted 2px #41403E;
    }
    section button .dashed .thin{
      border:dashed 2px #41403E;
    }
    @media (max-width:620px){
      h1{
        margin-top:2rem;
      }
      section{
        display:flex;
        flex-direction:column;
        justify-content:center;
        margin-bottom:1rem;
      }
      section button{
        align-self:center;
        margin-bottom:2rem;
      }
    }

 

 

<textarea resize>Resize me for some magic! 🎇</textarea>

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}
textarea {
  font-size: 24px;
  border:10px solid black;
  padding: 2rem 1rem;
  min-height: 3em;
  resize: both;
  background: #ffd73e33;
  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%232d3561' /%3E%3Cstop offset='25%25' stop-color='%23c05c7e' /%3E%3Cstop offset='50%25' stop-color='%23f3826f' /%3E%3Cstop offset='100%25' stop-color='%23ffb961' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='388'/%3E %3C/svg%3E") 1;
}

 

事例地址：https://codepen.io/electerious/pen/qPjbGm