css自定义删除（一个圆里有一个x）

方法一

<div style="height: 80px; width: 80px; border: 1px solid black; position: relative;">
<span class="close"></span>
</div>

.close:hover{cursor:pointer;}
.close {
background:gray;
color:white;
border-radius: 12px;
line-height: 20px;
text-align: center;
height: 20px;
width: 20px;
font-size: 18px;
padding: 1px;
position:absolute; 
left: 91%;
top:-21px;
}

.close::before {
content: "\2716";
}

方法二,

 

  <view class="close_upload"
                      @tap.stop="deleteImg2"
                      data-index="{{index}}">
                  <view class="close2 icon"></view>
                </view>

.close_upload {
  background: #3b3b3b;
  color: white;
  border-radius: 12px;
  line-height: 28rpx;
  text-align: center;
  height: 34rpx;
  width: 34rpx;
  font-size: 11px;
  padding: 1px;
  position: absolute;
  left: 80%;
  top: -4px;
}
//叉叉
.close2.icon {
  color: white;
  // position: absolute;
  // left: 0px;
  // width: 16px;
  // height: 16px;
}
.close2.icon:before {
  content: '';
  position: absolute;
  top: 8px;
  left: 9rpx;
  width: 10px;
  height: 1px;
  background-color: currentColor;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.close2.icon:after {
  content: '';
  position: absolute;
  top: 8px;
  left: 9rpx;
  width: 10px;
  height: 1px;
  background-color: currentColor;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}