用原生css实现上传这个样式？

Question

例如：

Answer 1

SVG的方式:

<style>
       .upload-btn {
           display: flex;
           align-items: center;
           justify-content: center;
           width: 200px;
           height: 200px;
           background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="%23ccc" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1v22M1 11h22"/></svg>');
           background-repeat: no-repeat;
           background-position: center;
           border: 1px dashed #ccc;
       }
   </style>

   <div class="upload-btn"></div>

Answer 2

用CSS线性渐变可以实现

label{
  display: block;
  width: 80px;
  height: 80px;
  border: 1px dashed #ccc;
  background: linear-gradient(#ccc,#ccc) center/40px 4px no-repeat,
linear-gradient(#ccc,#ccc) center/4px 40px no-repeat;
}

可以自己改大小和颜色

https://codepen.io/xboxyan/pen/OJBvbNo

Answer 3

border使用dashed, 里面加是一个iconfont
例如：

<div class="upload-btn">
    <i iconfont="plus" />
</div>

css:
.upload-btn {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #eee;
}