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>
相关推荐
lilian2334 分钟前
HarmonyOS 7 新特性(五)|ContainerReader 容器断点与自适应布局
前端·华为·harmonyos
计算机魔术师18 分钟前
Google DeepMind 将 AI 科学家 Co-Scientist 扩展为实验室集成研究伙伴
前端
2601_9657984727 分钟前
BrandBoost WordPress Theme Review: Fast Agency Web Architecture
前端
律宏阔30 分钟前
Electron 集成 Drizzle + SQLite 踩坑笔记
前端
律宏阔32 分钟前
Electron preload.ts 类型无法自动推导的解决方案
前端
烂蜻蜓37 分钟前
Flask入门教程(十):静态文件——CSS、JS与图片的正确管理方式
javascript·css·flask
名字还没想好☜44 分钟前
kubectl 排障实战:jsonpath 精准取值、custom-columns、events 排序与 top 速查
运维·前端·chrome·docker·kubernetes
李昊哲小课1 小时前
Spring Boot 4 旅游主题实战教程 阶段二:Web 开发基础
前端·spring boot·旅游
Mr数据杨1 小时前
【Codex】用学生支持周报模块跟踪个性化支持进展
android·java·javascript·django·codex·项目开发
独立开发之道1 小时前
【three.js教程】Three.js 材质详解:从“不反光“到“物理级真实“怎么选
开发语言·javascript·材质