【CSS菜谱】使用纯CSS样式实现加号等符号图标

一、加号图标➕

（一）效果展示

（二）原料

• 主要使用了CSS的伪类机制，即【::befor】和【::after】
• 以及一个标签：【div】、【p】、【image】、【view】等等均可以
• 涉及的属性在后面会具体说明

（三）烹饪

1、设置标签，以div为例

<div class="add"></div>

2、设置标签样式

.add {
  /* 重点属性。absolute或者relative，主要是为了给伪类定位 */
  position: relative;
  width: 150rpx;
  height: 150rpx;
  /* 设置圆角 */
  border-radius: 50%;
  /* 设置边框及颜色 */
  border: 2rpx solid #5e5e5e;
  /* 设置背景底色 */
  background-color: #c9c9c9;
}

效果：

3、画个“横”

这里使用伪类before和其border-top来设置

.add::before {
  content: '';
  /* 使用绝对定位*/
  position: absolute;
  /* 通过left、top设置居中 */
  left: 50%;
  top: 80rpx;
  /* 左右长度 */
  width: 110rpx;
  margin-left: -55rpx;
  margin-top: -10rpx;
  /* 横线厚度 */
  border-top: 10rpx solid;
  /* 颜色 */
  color: #dfdfdf;
}

效果：

4、画个“竖”

这里使用伪类after和其border-bottom来设置

.add::after {
  content: '';
  /* 使用绝对定位*/
  position: absolute;
  /* 通过left、top设置居中 */
  left: 80rpx;
  top: 50%;
  /* 竖线高度 */
  height: 110rpx;
  margin-left: -10rpx;
  margin-top: -55rpx;
  /* 横线厚度 */
  border-left: 10rpx solid;
  /* 颜色 */
  color: #dfdfdf;
}

效果：

5、扩充

可以继续添加hover等伪类，实现鼠标覆盖样式、点击样式等

未完待续ing……