前端 CSS 经典：弧形边框选项卡
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. 开始 准备一个元素，将元素左上角，右上角设为圆角。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, i…...
前端面试题日常练-day21 【面试题】
题目 希望这些选择题能够帮助您进行前端面试的准备，答案在文末。 AJAX 是什么的缩写？ a) Asynchronous JavaScript and XMLb) Asynchronous JavaScript and XHTMLc) Asynchronous Java and XMLd) Asynchronous Java and XHTML使用 AJAX 可以实现以下哪…...
几起 Linux 问题解决分享
（首发地址：学习日记 https://www.learndiary.com/2024/05/linux-problems/） 朋友们，大家好！我是淘宝网学习日记小店专注于Linux服务领域的 learndiary，今天很高兴能与大家分享近期处理的一些Linux故障案例&…...
LeetCode题解：9. 回文数，翻转一半数字，JavaScript，详细注释
原题链接 9. 回文数 解题思路 翻转数字 利用循环，每次将x右移一位将移出的数字存储到reversed的个位中每次存储前，需要将reversed左移一位 判断结果 当原x的长度为偶数，翻转后的结果相等当原x的长度为奇数，reversed一定比翻转后…...
微博：一季度运营利润9.11亿元，经营效率持续提升
5月23日，微博发布2024年第一季度财报。一季度微博总营收3.955亿美元，约合28.44亿元人民币，超华尔街预期。其中，广告营收达到3.39亿美元，约合24.39亿元人民币。一季度调整后运营利润达到1.258亿美元，约合9.1…...
Mysql总结1
Mysql常见日志 （1）错误日志：记录数据库服务器启动、停止、运行时存在的问题； （2）慢查询日志：记录查询时间超过long_query_time的sql语句，其中long_query_time可配置，且…...
three.js能实现啥效果？看过来，这里都是它的菜（05）
这是第五期了，本期继续分享three.js可以实现的3D动画案例，捎带讲一下如何将模型导入到three.js中。 如何将模型导入three.js中 three.js可以通过多种方式导入3D模型，以下是其中几种常见的方法： 使用three.js自带的OBJLoader或M…...
innerText和innerHTML的区别
innerHTML和innerText都是元素的属性，通过修改这个元素的属性可以达到修改元素内容的目的。但是二者之间略有不同。具体来说，它们的区别如下： innerHTML可以获取或设置元素内部的HTML内容，包括HTML标签，而innerText则…...
O2OA(翱途)开发平台数据统计如何配置？
O2OA提供的数据管理中心，可以让用户通过配置的形式完成对数据的汇总，统计和数据分组展现，查询和搜索数据形成列表数据展现。也支持用户配置独立的数据表来适应特殊的业务的数据存储需求。本文主要介绍如何在O2OA中开发和配置统计。 一、先决…...
网关过滤器使用及其原理分析
1.网关过滤器介绍 网关过滤器的用途一般是修改请求或响应信息，例如编解码、Token验证、流量复制等 官方文档地址：Spring Cloud Gateway 网关过滤器分为GloablFilter、GatewayFilter及DefaultFilter 过滤器的执行顺序由Order决定，Order值越小，优先级越高，越先执行 1.1…...
jiebaNET中文分词器
最近我接手了一个有趣的需求，需要对用户评价进行分词，进行词频统计和情绪分析，并且根据词频权重制成词云图以供后台数据统计，于是我便引入了jieba分词器,但是我发现网上关于jiebaNET相关文档实在太少了，甚至连配置文件…...
springboot3项目练习详细步骤（第四部分：文件上传、登录优化、多环境开发）
目录 本地文件上传 接口文档 业务实现 登录优化 SpringBoot集成redis 实现令牌主动失效机制 多环境开发 本地文件上传 接口文档 业务实现 创建FileUploadController类并编写请求方法 RestController public class FileUploadController {PostMapping("/upload&…...
视觉里程计的融合方法及优缺点分析
视觉里程计是视觉slam的一部分，即前端部分，用于前端跟踪并建立局部地图。多用于重定位或辅助定位，常用的有特征点法，光流法和直接法，其区别和优缺点如下。 特征点法，需要计算特征点和描述子，计算…...
SQL常用基础语句（一）-- FGHIJ开头
GROUP BY GROUP BY语法可以根据给定数据列的每个成员对查询结果进行分组统计，最终得到一个分组汇总表。在GROUP BY子句后面包含了一个HAVING子句，HAVING类似于WHERE，（唯一的差别是WHERE过滤行，HAVING过滤组࿰…...
大语言模型量化方法对比：GPTQ、GGUF、AWQ 包括显存和速度
GPTQ: Post-Training Quantization for GPT Models GPTQ是一种4位量化的训练后量化(PTQ)方法，主要关注GPU推理和性能。 该方法背后的思想是，尝试通过最小化该权重的均方误差将所有权重压缩到4位。在推理过程中，它将动态地将其权重去量化为f…...
实现本地访问云主机，以及在云主机搭建FTP站点
前言 云计算是一种基于互联网的计算模式，通过网络提供按需访问的计算资源和服务。核心概念是把计算能力视作一种公共资源，用户可以根据自身需求动态分配和管理这些资源。 云主机 ECS (Elastic Compute Server)是一种按需获取的云端服务器，提…...
存储+调优：存储-Cloud
存储调优：存储-Cloud Master Server 配置： 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…...
海山数据库（He3DB）线程池方案详解
前言 对于应用开发人员来说肯定听说过连接池，却不一定听说过线程池，虽然二者都是池化的概念，但还是有所不同的： 连接池面向的是数据库连接，是针对数据库Client侧的优化。连接池可将数据库连接数固定在一定范围内&#…...
K8s 高级调度
文章目录 K8s 高级调度CronJobinitContainerTaint 和 Toleration污点（Taint）容忍（Toleration） AffinityNodeAffinityPodAnffinity 和 PodAntiAffinity 总结 K8s 高级调度 CronJob 在 k8s 中周期性运行计划任务，与 li…...
数据猿携手IDC Directions 2024：探索中国ICT市场新趋势
大数据产业创新服务媒体 ——聚焦数据 改变商业 近日，ICT业界人士、行业数字化专家，以及来自投资机构、协会、智库的近500位嘉宾聚首北京，参加了IDC Directions 2024：中国ICT市场趋势论坛（北京站）活动。活…...
Python爬虫实战：研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生，我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要，而您认真负责的教学态度，让课程的每一部分都充满了实用价值。 尤其让我…...
大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...
CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！
本文介绍了一种名为AnomalyAny的创新框架，该方法利用Stable Diffusion的强大生成能力，仅需单个正常样本和文本描述，即可生成逼真且多样化的异常样本，有效解决了视觉异常检测中异常样本稀缺的难题，为工业质检、医疗影像…...
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...
计算机系统结构复习-名词解释2
1.定向：在某条指令产生计算结果之前，其他指令并不真正立即需要该计算结果，如果能够将该计算结果从其产生的地方直接送到其他指令中需要它的地方，那么就可以避免停顿。 2.多级存储层次：由若干个采用不同实现技术的存储…...
作为点的对象CenterNet论文阅读
摘要 检测器将图像中的物体表示为轴对齐的边界框。大多数成功的目标检测方法都会枚举几乎完整的潜在目标位置列表，并对每一个位置进行分类。这种做法既浪费又低效，并且需要额外的后处理。在本文中，我们采取了不同的方法。我们将物体建模为单…...
【Elasticsearch基础】Elasticsearch批量操作（Bulk API）深度解析与实践指南
目录 1 Bulk API概述 1.1 什么是批量操作 1.2 Bulk API的优势 2 Bulk API的工作原理 2.1 请求处理流程 2.2 底层机制 3 Bulk API的使用方法 3.1 基本请求格式 3.2 操作类型示例 3.3 响应格式 4 Bulk API的最佳实践 4.1 批量大小优化 4.2 错误处理策略 4.3 性能调…...