[JavaScript知识库] css自定义删除（一个圆里有一个x）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> css自定义删除（一个圆里有一个x） -> 正文阅读

[JavaScript知识库]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);
}