技术栈

CSS例子: 胶囊按钮

沈阳-施立2024-11-07 13:06

HTML

复制代码
<button class="btn">SEARCH</button>

CSS

复制代码
	.btn {
		width: 200rpx;
		height: 80rpx;
		border: none; 
		border-radius: 40rpx;
		background-color: burlywood;
	} 

tailwind css

复制代码
<button class="w-[200rpx] h-[80rpx] border-none rounded-[40rpx] bg-green-600">SEARCH</button>
上一篇:Linux查看端口占用及Windows查看端口占用
下一篇:新能源汽车与公共充电桩布局
相关推荐
hoLzwEge
16 分钟前
node-linker VS shamefully-hoist
前端·前端框架
袋鱼不重
23 分钟前
解决 Web 端图片预览与下载颜色不一致的一种工程方案
前端·后端
风止何安啊
29 分钟前
教你用 JS + AI 实现简单的爬虫,零门槛爬取网页信息
前端
cidy_98
29 分钟前
codebase-memory-mcp 新手完全教程:让 AI 真正「理解」你的代码库
前端
牛奶
36 分钟前
HTTPS你不知道的事
前端·https·浏览器
小小小小宇
39 分钟前
前端 Vue 如何避免不必要的子组件渲染全解析
前端
cidy_98
1 小时前
codebase-memory-mcp 安装教程
前端
mt_z
2 小时前
Webpack 与 Vite 完全指南
前端
灏仟亿前端技术团队
2 小时前
B 端多弹窗越来越难维护?试试把弹窗交互 Promise 化
前端
奇奇怪怪的
2 小时前
向量数据库选型与生产级实战
前端
热门推荐
012026 年 AI 编程工具终极横评:Cursor vs Claude Code vs Copilot vs Windsurf022026年6月AI大模型全景报告:GPT-5.6、Claude Opus 4.8、Gemini 3.5,中美AI三足鼎立谁主沉浮?032026年6月AI行业全景:从百模大战到Agent元年,这30天发生了什么?04【AI】2026 年具身智能模型和世界模型总结05Claude Code、Codex、Cursor三分天下:2026年AI编程Agent生态全景剖析06Trae国际版与国内版深度测评:AI原生IDE的双生花07飞书长连接_事件订阅(接收消息,审批任务状态变更)082026 AI 编程工具终极实战指南:Cursor vs Claude Code vs Copilot,开发者该怎么选?09GitHub 镜像站点102026年AI架构实战:彻底解决OpenAI接口超时与封号,Python调用GPT-5.2/Sora2企业级架构详解(附源码+压测报告)