一、加号图标➕
(一)效果展示
(二)原料
- 主要使用了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等伪类,实现鼠标覆盖样式、点击样式等