CSS实现一些小功能
1.信封边框的实现
1.1 使用背景渐变
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.uu {width: 200px;height: 70px;padding:1em;border: 1em solid transparent;background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em; }</style></head><body><div class="uu"></div></body>
</html>
1.2 使用边框图片
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.uu {width: 200px;height: 70px;padding: 1em;border: 1em solid transparent;background:linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;}</style></head><body><div class="uu"></div></body>
</html>
2.内凹圆角(优惠券)
2.1 使用伪类
<div class="main"></div>
<style>
.main {position: relative;width: 200px;height: 40px;margin: 0 5px;background: -webkit-linear-gradient(left, #F6327C, #DF3DF0);background: linear-gradient(to right, #F6327C, #DF3DF0);
}
.main::before {position: absolute;content: "";display: block;position: absolute;top: 0;left: -5px;width: 5px;height: 40px;border-radius: 2px 0 0 2px;background:-webkit-radial-gradient(10px at left,transparent 50%,#F6327C 50%);background: radial-gradient(10px at left,transparent 50%,#F6327C 50%);
}
.main::after {position: absolute;content: "";display: block;position: absolute;top: 0;right: -5px;width: 5px;height: 40px;border-radius: 0 2px 2px 0;background: -webkit-radial-gradient(10px at right,transparent 50%,#F6327C 50%);background: radial-gradient(10px at right,transparent 50%,#F6327C 50%);
}
</style>
相关文章：
CSS实现一些小功能
1.信封边框的实现 1.1 使用背景渐变 <!DOCTYPE html><html><head><meta charset"UTF-8"><title></title><style type"text/css">.uu {width: 200px;height: 70px;padding:1em;border: 1em solid transparent;…...
Ubuntu安装nfs服务步骤
Ubuntu安装nfs服务步骤 一、NFS？ NFS：网络文件系统（Network File system File）缩写，可通过网络让不同的机器，不同操作系统之间可以彼此共享文件和目录。 二、安装 1.安装nfs服务器命令：sudo…...
android开发：子线程更新UI界面
多线程操作经常希望在子线程更新界面，这样方便调试，但是，但是经常这样做程序就不对劲了，为什么呢？因为为了保证界面流畅，不允许在非UI线程直接操作界面，只能通过一些专门途径进行。另外…...
P9242 [蓝桥杯 2023 省 B] 接龙数列(dp+最长接龙序列+分类)
1. 计算0~9为结尾的最长子串长度 2. 对于每个数字，比较其开头可连接子串长度1 与 原来以其末位为末尾的子串长度 3. 更新以其末位为末尾的子串长度 #include<iostream> #include<string.h>using namespace std;// 相当于记录…...
网络运维与网络安全 学习笔记2023.11.29
网络运维与网络安全 学习笔记 第三十天 今日更新太晚啦！！！ 主要是今天工作时挨了一天骂，服了，下次记得骂的轻一点！！！ （要不是为了那点微薄的薪资，谁愿意听你…...
Java实现通过经纬度求两个任意地点在球面上的距离
我们在实际开发中会获取对应的经纬度，可以使用ES大数据搜索引擎进行计算对应区域的数据，那我们在如何根据两个经纬度获取对应的球面距离，就是在地球上从一个地点到另一个地点的直线距离 工具类如下: public class GeoUtils {// 地球半径&am…...
vscode使用插件KoroFileHeader添加注释
一、简介 KoroFileHeader 是一款用于在 VSCode 中用于生成文件头部注释和函数注释的插件，支持所有主流语言，功能强大，灵活方便，文档齐全。 VSCode 安装 KoroFileHeader 好插件，就可以直接使用。 "fileheader.cu…...
NSAttributedString设置折行方式NSLineBreakByTruncatingTail，计算高度出错，高度返回异常。
iOS13上，NSAttributedString设置折行方式NSLineBreakByTruncatingTail，计算高度出错，只返回一行的高度。 NSMutableParagraphStyle *style [[NSMutableParagraphStyle alloc]init]; style.hyphenationFactor 1; // 设置每行的最后单词是…...
YOLOv8改进 | 2023 | DWRSeg扩张式残差助力小目标检测 （附修改后的C2f+Bottleneck）
论文地址：官方论文地址 代码地址：该代码目前还未开源，我根据论文内容进行了复现内容在文章末尾。 一、本文介绍 本文内容给大家带来的DWRSeg中的DWR模块来改进YOLOv8中的C2f和Bottleneck模块，主要针对的是小目标检测，…...
ssm+vue的物资物流系统的设计与实现（有报告）。Javaee项目，ssm vue前后端分离项目。
演示视频： ssmvue的物资物流系统的设计与实现（有报告）。Javaee项目，ssm vue前后端分离项目。 项目介绍： 采用M（model）V（view）C（controller）三层体…...
纵行科技获评“汽车物流行业优秀技术装备供应商”
近日，由中国物流与采购联合会主办，中物联汽车物流分会承办的“2023年全国汽车物流行业年会”在湖北十堰盛大召开。本次年会集合了汽车整车、零部件、售后备件、进出口物流企业和物流装备技术企业、科研机构及院校等，分享汽车物流行业现状、相…...
Chrome和chromedriver版本不匹配导致的UI自动化测试无法运行的问题
今天，遇到一个小问题，本来跑的好好UI自动化测试脚本突然不好使了，期初怀疑是页面元素有调整导致脚本出现异常无法正常执行，经排查后发现近期页面没有任何调整。 这下头大了，啥也没改，怎么好好的脚本不能跑…...
[go 面试] 深入理解进程、线程和协程的概念及区别
关注公众号【爱发白日梦的后端】分享技术干货、读书笔记、开源项目、实战经验、高效开发工具等，您的关注将是我的更新动力！ 在操作系统中，我们经常听到进程、线程和协程这些概念，它们都是用来描述执行单元的。接下来，我…...
人工智能即将彻底改变你使用计算机的方式
文章目录 每个人的私人助理“Clippy 是一个机器人，而不是特工。”卫生保健“一半需要心理健康护理的美国退伍军人没有得到治疗。”教育生产率娱乐和购物科技行业的冲击波技术挑战隐私和其他重大问题 今天我仍然像保罗艾伦和我创办微软时一样热爱软件。但是ÿ…...
工艺系统所管理数字化实践
摘要 本文介绍了上海核工程设计研究院在数字化转型方面的实践，包括业务数字化和管理数字化两个方面。业务数字化方面，该院通过开发小工具改进工作流程。管理数字化方面，该院采用零代码平台集中管理管道力学信息相关模型和数据，并…...
VsCode学习
一、在VsCode 上编写第一个C语言 在VsCode上写代码都是先打开文件夹，这样也方便管理代码和编译器产生的可执行程序，VsCode生成的配置文件等。 1.1打开文件夹 写代码前，首先创立一个文件夹存储以后我们写的VsCode代码，便于管理。…...
Javaweb之Vue组件库Element案例的详细解析
4.4 案例 4.4.1 案例需求 参考 资料/页面原型/tlias智能学习辅助系统/首页.html 文件，浏览器打开，点击页面中的左侧栏的员工管理，如下所示： 需求说明： 制作类似格式的页面 即上面是标题，左侧栏是导航&…...
Bert-VITS2本地部署遇到的错误
关于Bert-VITS2本地部署遇到的错误 1、在下载python中相关依赖时报错 building ‘hdbscan._hdbscan_tree’ extension error: Microsoft Visual C 14.0 or greater is required. Get it with “Microsoft C Build Tools”: https://visualstudio.microsoft.com/visual-cpp-bu…...
【Ambari】HDFS基于Ambari的常规运维
🦄 个人主页——🎐开着拖拉机回家_大数据运维-CSDN博客 🎐✨🍁 🪁🍁🪁🍁🪁🍁🪁🍁 🪁🍁🪁…...
WIFI模块（esp-01s）获取网络时间与天气信息
目录 一、硬件连接 二、获取网络时间 1、AT指令集 2、具体操作 三、获取天气信息 1、心知天气注册 2、AT指令集 3、具体操作 4、json格式检查 一、硬件连接 WiFi模块的RX连接TTL模块的TX， WiFi模块的TX连接TTL模块的RX，电源与地接对。 插入电脑…...
KubeSphere 容器平台高可用：环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界，看笔记好好学多敲多打，每个人都是大神！ 题目：KubeSphere 容器平台高可用：环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？
编辑：陈萍萍的公主一点人工一点智能 未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
多模态2025：技术路线“神仙打架”，视频生成冲上云霄
文｜魏琳华 编｜王一粟 一场大会，聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中，汇集了学界、创业公司和大厂等三方的热门选手，关于多模态的集中讨论达到了前所未有的热度。其中，…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应，这是一种非线性光学现象，主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场，对材料产生非线性响应，可能…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
Neo4j 集群管理：原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目（父项目）主要用于依赖管理 一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了，报错如下四、启动不了，解决如下 总结 问题原因 在应用中可以看到chrome，但是打不开(说明：原来的ubuntu系统出问题了，这个是备用的硬盘&a…...
Python如何给视频添加音频和字幕
在Python中，给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加，包括必要的代码示例和详细解释。 环境准备 在开始之前，需要安装以下Python库：…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI（https://spring.io/projects/spring-ai）作为Spring生态中的AI集成框架，其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似，但特别为多语…...