css实现纯加号

bash 复制代码
<!DOCTYPE html>  
<html>  
<head>  
<style>  
.circle-plus {  
  position: relative;  
  width: 50px;  
  height: 50px;  
  border-radius: 50%;  
  background-color: #3498db;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  
  
.circle-plus::before, .circle-plus::after {  
  content: '';  
  position: absolute;  
  background-color: #fff;  
}  
  
.circle-plus::before {  
  width: 2px;  
  height: 20px;  
  top: 15px;  
  left: 24px;  
}  
  
.circle-plus::after {  
  width: 20px;  
  height: 2px;  
  top: 24px;  
  left: 15px;  
}  
</style>  
</head>  
<body>  
  
<div class="circle-plus"></div>  
  
</body>  
</html>
相关推荐
鹏多多3 小时前
flutter-屏幕自适应插件flutter_screenutil教程全指南
android·前端·flutter
m0_471199633 小时前
【JavaScript】Map对象和普通对象Object区别
开发语言·前端·javascript
心.c3 小时前
《从零开始:打造“核桃苑”新中式风格小程序UI —— 设计思路与代码实现》
开发语言·前端·javascript·ui
GISer_Jing3 小时前
Flutter零基础速成指南
前端·flutter
一个处女座的程序猿O(∩_∩)O3 小时前
React Native 全面解析:跨平台移动开发的利器
javascript·react native·react.js
国科安芯3 小时前
AS32A601型MCU芯片flash模块的擦除和编程
java·linux·前端·单片机·嵌入式硬件·fpga开发·安全性测试
IT_陈寒3 小时前
【SpringBoot 3.2实战】10倍性能优化的5个冷门技巧,90%开发者都不知道!
前端·人工智能·后端
n***i953 小时前
前端技术的反向演进:去框架化浪潮下的轻量化与原生能力回归
前端
幸运小圣3 小时前
defineAsyncComponent【Vue3】
前端·javascript·vue.js
晚霞的不甘4 小时前
华为云 DevUI 微前端实战:基于 Module Federation 的多团队协作架构落地
javascript·zookeeper·云原生·华为云·firefox