当前位置： 首页 > news >正文

前端 CSS 经典：弧形边框选项卡

news 2026/3/27 7:33:43

1. 效果图

2. 开始

准备一个元素，将元素左上角，右上角设为圆角。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.tab {width: 150px;height: 40px;margin: 0 auto;background: #ed6a5e;border-radius: 10px 10px 0 0;}</style></head><body><div class="tab"></div></body>
</html>

然后要在左右两边拼接弧形，我们可以写两个伪元素

.tab::before,
.tab::after {content: "";position: absolute;width: 10px;height: 10px;bottom: 0;
}.tab::before {left: -10px;
}
.tab::before {right: -10px;
}

那怎么将这两个元素做成弧形呢，可以使用渐变。

.tab::before {background: radial-gradient(circle at 0 0, transparent 10px, #ed6a5e 10px);
}
.tab::after {background: radial-gradient(circle at 100% 0, transparent 10px, #ed6a5e 10px);
}

这下我们有了弧形，那怎么做成效果图的样式呢，最后我们可以使用旋转。

.tab {transform: perspective(30px) rotateX(20deg);transform-origin: center bottom;
}

 

3.完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.tab {width: 150px;height: 40px;margin: 0 auto;background: #ed6a5e;border-radius: 10px 10px 0 0;position: relative;transform: perspective(30px) rotateX(20deg);transform-origin: center bottom;}.tab::before,.tab::after {content: "";position: absolute;width: 10px;height: 10px;bottom: 0;background: #000;}.tab::before {left: -10px;background: radial-gradient(circle at 0 0,transparent 10px,#ed6a5e 10px);}.tab::after {right: -10px;background: radial-gradient(circle at 100% 0,transparent 10px,#ed6a5e 10px);}</style></head><body><div class="tab"></div></body>
</html>

相关文章：

前端 CSS 经典：弧形边框选项卡

1. 效果图 2. 开始 准备一个元素&#xff0c;将元素左上角&#xff0c;右上角设为圆角。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, i…...

编程日记 2024/5/24 3:26:57

前端面试题日常练-day21 【面试题】

题目 希望这些选择题能够帮助您进行前端面试的准备&#xff0c;答案在文末。 AJAX 是什么的缩写&#xff1f; a) Asynchronous JavaScript and XMLb) Asynchronous JavaScript and XHTMLc) Asynchronous Java and XMLd) Asynchronous Java and XHTML使用 AJAX 可以实现以下哪…...

编程日记 2024/5/24 3:24:55

几起 Linux 问题解决分享

&#xff08;首发地址&#xff1a;学习日记 https://www.learndiary.com/2024/05/linux-problems/&#xff09; 朋友们&#xff0c;大家好&#xff01;我是淘宝网学习日记小店专注于Linux服务领域的 learndiary&#xff0c;今天很高兴能与大家分享近期处理的一些Linux故障案例&…...

编程日记 2024/5/24 3:21:52

LeetCode题解：9. 回文数，翻转一半数字，JavaScript，详细注释

原题链接 9. 回文数 解题思路 翻转数字 利用循环&#xff0c;每次将x右移一位将移出的数字存储到reversed的个位中每次存储前&#xff0c;需要将reversed左移一位 判断结果 当原x的长度为偶数&#xff0c;翻转后的结果相等当原x的长度为奇数&#xff0c;reversed一定比翻转后…...

编程日记 2024/5/24 3:18:49

微博：一季度运营利润9.11亿元，经营效率持续提升

5月23日&#xff0c;微博发布2024年第一季度财报。一季度微博总营收3.955亿美元&#xff0c;约合28.44亿元人民币&#xff0c;超华尔街预期。其中&#xff0c;广告营收达到3.39亿美元&#xff0c;约合24.39亿元人民币。一季度调整后运营利润达到1.258亿美元&#xff0c;约合9.1…...

编程日记 2024/5/24 3:17:49

Mysql总结1

Mysql常见日志 &#xff08;1&#xff09;错误日志&#xff1a;记录数据库服务器启动、停止、运行时存在的问题&#xff1b; &#xff08;2&#xff09;慢查询日志&#xff1a;记录查询时间超过long_query_time的sql语句&#xff0c;其中long_query_time可配置&#xff0c;且…...

编程日记 2024/5/24 3:15:47

three.js能实现啥效果？看过来，这里都是它的菜（05）

这是第五期了&#xff0c;本期继续分享three.js可以实现的3D动画案例&#xff0c;捎带讲一下如何将模型导入到three.js中。 如何将模型导入three.js中 three.js可以通过多种方式导入3D模型&#xff0c;以下是其中几种常见的方法&#xff1a; 使用three.js自带的OBJLoader或M…...

编程日记 2024/5/24 3:12:42

innerText和innerHTML的区别

innerHTML和innerText都是元素的属性&#xff0c;通过修改这个元素的属性可以达到修改元素内容的目的。但是二者之间略有不同。具体来说&#xff0c;它们的区别如下&#xff1a; innerHTML可以获取或设置元素内部的HTML内容&#xff0c;包括HTML标签&#xff0c;而innerText则…...

编程日记 2024/5/24 3:11:41

O2OA(翱途)开发平台数据统计如何配置？

O2OA提供的数据管理中心&#xff0c;可以让用户通过配置的形式完成对数据的汇总&#xff0c;统计和数据分组展现&#xff0c;查询和搜索数据形成列表数据展现。也支持用户配置独立的数据表来适应特殊的业务的数据存储需求。本文主要介绍如何在O2OA中开发和配置统计。 一、先决…...

编程日记 2024/5/24 3:10:40

网关过滤器使用及其原理分析

1.网关过滤器介绍 网关过滤器的用途一般是修改请求或响应信息，例如编解码、Token验证、流量复制等 官方文档地址：Spring Cloud Gateway 网关过滤器分为GloablFilter、GatewayFilter及DefaultFilter 过滤器的执行顺序由Order决定，Order值越小，优先级越高，越先执行 1.1…...

编程日记 2024/5/24 3:09:39

jiebaNET中文分词器

最近我接手了一个有趣的需求&#xff0c;需要对用户评价进行分词&#xff0c;进行词频统计和情绪分析&#xff0c;并且根据词频权重制成词云图以供后台数据统计&#xff0c;于是我便引入了jieba分词器,但是我发现网上关于jiebaNET相关文档实在太少了&#xff0c;甚至连配置文件…...

编程日记 2024/5/24 3:07:37

springboot3项目练习详细步骤（第四部分：文件上传、登录优化、多环境开发）

目录 本地文件上传 接口文档 业务实现 登录优化 SpringBoot集成redis 实现令牌主动失效机制 多环境开发 本地文件上传 接口文档 业务实现 创建FileUploadController类并编写请求方法 RestController public class FileUploadController {PostMapping("/upload&…...

编程日记 2024/5/24 3:05:35

视觉里程计的融合方法及优缺点分析

视觉里程计是视觉slam的一部分&#xff0c;即前端部分&#xff0c;用于前端跟踪并建立局部地图。多用于重定位或辅助定位&#xff0c;常用的有特征点法&#xff0c;光流法和直接法&#xff0c;其区别和优缺点如下。 特征点法&#xff0c;需要计算特征点和描述子&#xff0c;计算…...

编程日记 2024/5/24 3:04:33

SQL常用基础语句（一）-- FGHIJ开头

GROUP BY GROUP BY语法可以根据给定数据列的每个成员对查询结果进行分组统计&#xff0c;最终得到一个分组汇总表。在GROUP BY子句后面包含了一个HAVING子句&#xff0c;HAVING类似于WHERE&#xff0c;&#xff08;唯一的差别是WHERE过滤行&#xff0c;HAVING过滤组&#xff0…...

编程日记 2024/5/24 3:02:31

大语言模型量化方法对比：GPTQ、GGUF、AWQ 包括显存和速度

GPTQ: Post-Training Quantization for GPT Models GPTQ是一种4位量化的训练后量化(PTQ)方法&#xff0c;主要关注GPU推理和性能。 该方法背后的思想是&#xff0c;尝试通过最小化该权重的均方误差将所有权重压缩到4位。在推理过程中&#xff0c;它将动态地将其权重去量化为f…...

编程日记 2024/5/24 3:00:28

实现本地访问云主机，以及在云主机搭建FTP站点

前言 云计算是一种基于互联网的计算模式&#xff0c;通过网络提供按需访问的计算资源和服务。核心概念是把计算能力视作一种公共资源&#xff0c;用户可以根据自身需求动态分配和管理这些资源。 云主机 ECS (Elastic Compute Server)是一种按需获取的云端服务器&#xff0c;提…...

编程日记 2024/5/24 2:59:27

存储+调优：存储-Cloud

存储调优&#xff1a;存储-Cloud Master Server 配置&#xff1a; IP192.168.1.254 useradd mfs tar zxf mfs-1.6.11.tar.gz.gz cd mfs-1.6.11 ./configure --prefix/usr --sysconfdir/etc --localstatedir/var/lib --with-default-usermfs --with-default-groupmfs --disabl…...

编程日记 2024/5/24 2:58:26

海山数据库（He3DB）线程池方案详解

前言 对于应用开发人员来说肯定听说过连接池&#xff0c;却不一定听说过线程池&#xff0c;虽然二者都是池化的概念&#xff0c;但还是有所不同的&#xff1a; 连接池面向的是数据库连接&#xff0c;是针对数据库Client侧的优化。连接池可将数据库连接数固定在一定范围内&#…...

编程日记 2024/5/24 2:57:25

K8s 高级调度

文章目录 K8s 高级调度CronJobinitContainerTaint 和 Toleration污点&#xff08;Taint&#xff09;容忍&#xff08;Toleration&#xff09; AffinityNodeAffinityPodAnffinity 和 PodAntiAffinity 总结 K8s 高级调度 CronJob 在 k8s 中周期性运行计划任务&#xff0c;与 li…...

编程日记 2024/5/24 2:56:23

数据猿携手IDC Directions 2024：探索中国ICT市场新趋势

大数据产业创新服务媒体 ——聚焦数据 改变商业 近日&#xff0c;ICT业界人士、行业数字化专家&#xff0c;以及来自投资机构、协会、智库的近500位嘉宾聚首北京&#xff0c;参加了IDC Directions 2024&#xff1a;中国ICT市场趋势论坛&#xff08;北京站&#xff09;活动。活…...

编程日记 2024/5/24 2:55:22

开源像素艺术工具推荐：Pixel Fashion Atelier vs Automatic1111定制化对比

开源像素艺术工具推荐&#xff1a;Pixel Fashion Atelier vs Automatic1111定制化对比 1. 工具概览 1.1 Pixel Fashion Atelier简介 Pixel Fashion Atelier是一款基于Stable Diffusion与Anything-v5的图像生成工作站。它采用独特的复古日系RPG界面设计&#xff0c;将AI图像生…...

编程新知 2026/3/27 7:28:13

Markdown Viewer 突破限制：全新自定义主题功能释放创作潜能

Markdown Viewer 突破限制&#xff1a;全新自定义主题功能释放创作潜能 【免费下载链接】markdown-viewer Markdown Viewer / Browser Extension 项目地址: https://gitcode.com/gh_mirrors/ma/markdown-viewer 副标题&#xff1a;如何通过自定义主题功能实现文档视觉体…...

编程新知 2026/3/27 6:59:26

CH340系列芯片选型指南与外围电路设计实战

1. CH340系列芯片选型指南 第一次接触CH340系列芯片时&#xff0c;我被它丰富的型号搞得眼花缭乱。作为国内最常用的USB转串口芯片之一&#xff0c;CH340系列凭借稳定的性能和亲民的价格&#xff0c;在嵌入式开发领域占据重要地位。但面对十几种不同型号&#xff0c;新手往往会…...

编程新知 2026/3/27 6:43:18

基于Matlab的转子系统临界转速与主振型求解：传递矩阵法及其参数涉及等截面、材料与轮盘参数的...

140.基于matlab的求解转子系统前三个临界转速和主振型的传递矩阵法转子系统的不平衡响应 参数涉及等截面参数、材料参数、轮盘参数 程序已调通&#xff0c;可直接运行传递矩阵法这玩意儿在转子动力学里属于实操性极强的工具&#xff0c;今天咱们就拿Matlab直接开搞转子系统的前…...

编程新知 2026/3/27 6:17:03

vLLM 5.0.4 实战：从参数解析到批量推理的性能调优指南

1. vLLM 5.0.4核心参数解析与实战配置 初次接触vLLM时&#xff0c;最让人头疼的就是那一长串参数列表。我在实际项目中使用Meta-Llama-3.1-8B-Instruct模型时&#xff0c;就曾因为参数配置不当导致显存爆炸。下面分享几个关键参数的实战经验&#xff1a; LLM类参数中的max_mode…...

编程新知 2026/3/27 6:13:02

卡尔曼滤波+LQR实战：用Python手写一个LQG控制器（附Jupyter Notebook）

卡尔曼滤波LQR实战&#xff1a;用Python手写一个LQG控制器&#xff08;附Jupyter Notebook&#xff09; 在机器人控制和自动化系统设计中&#xff0c;LQG&#xff08;Linear Quadratic Gaussian&#xff09;控制是一种经典且强大的控制策略。它巧妙地将卡尔曼滤波的状态估计能力…...

编程新知 2026/3/27 6:01:00

三极管基极下拉电阻在高速电路中的关键作用解析

1. 三极管基极下拉电阻的基础认知 第一次接触三极管电路时&#xff0c;我和很多新手一样&#xff0c;对基极那个看似多余的下拉电阻充满疑惑。明明没有它电路也能工作&#xff0c;为什么工程师们总爱画蛇添足&#xff1f;直到有次调试电机驱动电路&#xff0c;三极管莫名其妙地…...

编程新知 2026/3/27 5:34:53

SEO_2024年最新SEO策略与趋势深度解析（352 ）

<h2>2024年最新SEO策略与趋势深度解析</h2> <p>在数字化时代&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;依然是网站流量和品牌影响力的核心驱动力。2024年&#xff0c;随着互联网技术的不断进步&#xff0c;SEO策略和趋势也在不断演变。本文将详细…...

编程新知 2026/3/27 4:36:00

Simulink与Plecs联合仿真实现三相桥式电路能量双向流动

simulinkplecs联合仿真源件&#xff0c;三相桥式电路&#xff0c;采用母线电压外环与电流内环控制&#xff0c;可整流也可逆变并网&#xff0c;实现能量双向流动&#xff0c;采用SVPWM调制方式。 1.plecssimulink 2.SVPWM 3.双闭环 支持simulink2022以下版本&#xff0c;联系跟…...

编程新知 2026/3/27 4:35:59

别再折腾虚拟机了！用Docker 5分钟搞定Oracle 10g测试环境（附阿里云镜像源）

5分钟极速部署Oracle 10g&#xff1a;Docker化开发环境实战指南 每次需要搭建Oracle测试环境时&#xff0c;你是否也经历过这样的痛苦&#xff1f;下载几个GB的安装包、配置复杂的系统参数、等待漫长的安装过程&#xff0c;最后可能还会遇到各种依赖问题。作为一名长期与Oracle…...

编程新知 2026/3/27 4:11:40