前端 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市场趋势论坛（北京站）活动。活…...
19c补丁后oracle属主变化，导致不能识别磁盘组
补丁后服务器重启，数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后，存在与用户组权限相关的问题。具体表现为，Oracle 实例的运行用户（oracle）和集…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）
概述 在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...
【位运算】消失的两个数字（hard）
消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码 题⽬链接：⾯试题 17.19. 消失的两个数字 题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代，加密货币作为一种新兴的金融现象，正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而，加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下，稳定…...
【C++】纯虚函数类外可以写实现吗？
1. 答案 先说答案，可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...
qt+vs Generated File下的moc_和ui_文件丢失导致 error LNK2001
qt 5.9.7 vs2013 qt add-in 2.3.2 起因是添加一个新的控件类，直接把源文件拖进VS的项目里，然后VS卡住十秒，然后编译就报一堆 error LNK2001 一看项目的Generated Files下的moc_和ui_文件丢失了一部分，导致编译的时候找不到了。因…...
起重机起升机构的安全装置有哪些？
起重机起升机构的安全装置是保障吊装作业安全的关键部件，主要用于防止超载、失控、断绳等危险情况。以下是常见的安全装置及其功能和原理： 一、超载保护装置（核心安全装置） 1. 起重量限制器 功能：实时监测起升载荷&a…...