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>
相关推荐
疯狂的魔鬼7 小时前
一个"懂分寸"的文本省略组件是怎样炼成的
前端·vue.js·设计
angerdream7 小时前
手把手编写儿童手机远程监控App之vue3 AI Gent
前端
李明卫杭州7 小时前
CSS BFC 完全指南:从原理到实战,彻底搞懂这个"结界"
前端
裕波7 小时前
AI 正在重写应用开发。Vue 与 Vite,给出新的答案。
javascript·vue.js
Momo__7 小时前
MDN MCP Server——Mozilla 把 Web 文档接进 AI Agent,从此 LLM 不再瞎编 API
前端·ai编程·mcp
妙码生花7 小时前
现代前端的极致性能 icon 加载方案(死磕成功版)
前端·vue.js·typescript
掘金者阿豪8 小时前
把业务数据变成共享仪表盘:Metabase可视化与远程访问实践
前端·后端
kyriewen8 小时前
折腾了半年 AI 编程工作流,最后发现效率瓶颈是桌上那块屏幕
前端·javascript·ai编程
蜗牛前端8 小时前
codex 全流程开发上线的高颜值礼簿小程序
前端·微信小程序
大龄秃头程序员9 小时前
我在图文流 App 里落地双层缓存、弱网降级与 OOM 治理
前端