收藏几个好看的边框背景图片

一、纯css效果

科技1 

// css
body{
  background: rgb(22,22,22);
}
.back{
  height: 100px; 
   200px; 
  color:#00d3e7; 
  padding: 10px;
  box-shadow: 0 0 20px rgba(100,200,255,.5) inset;
  background: rgba(0,0,0,.3)
}
// html
<div className={styles.back}>
  nihao
</div>

二、使用图片素材效果

使用举例

　　先复制图片地址，再插入 url 中，最后调整 border 和 border-image 的数值

.box{
  color: #00d3e7;
  height: 200px;
   400px;
  border: 34px solid transparent;
  border-image: url(https://img2020.cnblogs.com/blog/1517387/202009/1517387-20200908162917062-525507318.png) 15% 5%;
}

图片素材

科技2

科技3