微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css中圆圈中间有个加号

CSS中实现圆圈中间有个加号可以通过伪元素和背景色实现:

.Box {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #999;
}
.Box::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  margin-top: -1px;
  margin-left: -5px;
  background-color: #fff;
}
.Box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 10px;
  margin-top: -5px;
  margin-left: -1px;
  background-color: #fff;
}

css中圆圈中间有个加号

首先创建一个50px的圆形盒子,使用border-radius属性使其变成圆形。然后使用position属性将它设置为相对定位,为了后面对伪元素进行绝对定位做准备。

接下来,使用::before和::after伪元素来创建加号。分别设置它们的content为null,并且将它们放置在盒子的中心。在::before伪元素中创建一个2px高、10px宽的白色横杠,在::after伪元素中创建一个10px高、2px宽的白色竖杠。

最后,通过设置伪元素的top、left、margin等属性将它们放置在盒子的中心。

这样就可以在CSS中实现带有加号的圆形盒子了。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。