CSS实现流线边框

使用css实现简单 流线边框 /显示上下边框

 实例图

html:

 <div class="box">

        <h1>CSS</h1>

  </div>

<button class="bt">显示上下边框</button>

 css:

//流线边框
.box {
  width: 300px;
  height: 400px;
  background-color: rgba(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 200px auto;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}
.box h1 {
  color: #fff;
  text-shadow: 1px 2px #fff;
  border-radius: 20px;
  font-size: 4em;
  z-index: 1;
}
.box::before {
  content: '';
  width: 100px;
  height: 120%;
  position: absolute;
  background: linear-gradient(rgb(0, 157, 255), rgb(202, 18, 162));
  opacity: 0;
}
.box::after {
  content: '';
  position: absolute;
  inset: 5px;
  background-color: rgb(0, 0, 0);
  border-radius: 20px;

  // z-index: 999;
}
.box:hover::before {
  // animation: name duration timing-function delay iteration-count direction fill-mode;
  opacity: 1;
  animation: rotate 2s linear infinite;
  @keyframes rotate {
    from {
      
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}


// 显示上下边框

button {
  display: block;
  border: none;
  background: none;
  font-size: 50px;
  // font-weight: normal;
}
button::after,
button::before {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #f70;
  transition: 2s;
}
button:hover::after,
button:hover::before {
  width: 100%;
}
button::before {
  margin-left: auto;
}

总结:

流线边框 :  主要使用inset属性 ,设置距离四边的边框的距离

显示上下边框: 主要使用 margin-left: auto---实现回流