深入理解css3背景图边框
border-image知识点
重点理解 border-image-slice 设置的值将边框背景图分为9份，图像中间的舍弃，其他部分图像对应边框的相应区域放置，上右下左四角固定，border-image-repeat设置的是除四角外其他部分的显示方式。
截图来自菜鸟教程：CSS3 border-image-slice 属性 | 菜鸟教程
目标：做如下边框效果图
边框背景原图
背景图像大小 81*81
依据 border-image-slice: 30; 将图像分为9部分，四角红色块放在边框对应的四角。
黄色块依据 border-image-repeat: round; 图像缩放平铺。
示例代码
<!DOCTYPE >
<html><head><meta charset="utf-8" /><metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/><title>把边框玩出花</title><style>body {margin: 0;padding: 0;}div.container {border: 1px solid darkcyan;margin: 20px;/* box-sizing: border-box; */}div.test {/* border: 15px solid transparent; */border: 15px solid red;padding: 0;border-image-source: url(img/border.png);/* border-image -width属性指定图像边界的宽度。如果指定了auto，宽度是相应的image slice的内在宽度或高度 *//* 百分比：边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积 *//* border-image-width: 100%; *//* border-image-width: 30%; *//* number：表示相应的border-width的倍数。 *//* border-image-width: 1; */border-image-width: 2;/* border-image -slice属性指定图像的边界向内偏移。百分比：图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度。默认值100%。fill：保留图像的中间部分 *//* number：表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像）。 */border-image-slice: 30;border-image-repeat: round;/* border-image-outset用于指定在边框外部绘制 border-image-area 的量.number代表相应的 border-width 的倍数 *//* length设置边框图像与边框（border-image）的距离，默认为0。 *//* border-image-outset: 10px 5px 2px 5px; */}div.test > p {margin: 20px;padding: 20px;border: 1px dashed darkgoldenrod;}</style></head><body><div class="container"><div class="test"><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditatein voluptatum sunt quae, animi explicabo illo dolore doloribus eafugit accusantium similique. Illo sint ipsam numquam ex doloribus inquam!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero,excepturi? Quae repellat aspernatur exercitationem quibusdam, minusveritatis accusamus! Molestiae ducimus voluptatum assumendarepellendus quasi dicta in culpa, quod iusto cupiditate.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectuscupiditate, consectetur aliquid officia quidem eligendi repellendus,provident libero deleniti suscipit quod quam velit teneturexercitationem reiciendis qui temporibus ad. Consequuntur?</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisnesciunt voluptates quibusdam laboriosam, quod consequatur recusandaeeum nostrum corrupti sequi expedita saepe soluta sapiente velit estdeserunt enim, cupiditate ex!</p></div></div><script></script></body>
</html>
相关文章：
深入理解css3背景图边框
border-image知识点 重点理解 border-image-slice 设置的值将边框背景图分为9份，图像中间的舍弃，其他部分图像对应边框的相应区域放置，上右下左四角固定，border-image-repeat设置的是除四角外其他部分的显示方式。 截图来自菜鸟教…...
【rust/egui】(六)看看template的app.rs：TextEdit
说在前面 rust新手，egui没啥找到啥教程，这里自己记录下学习过程环境：windows11 22H2rust版本：rustc 1.71.1egui版本：0.22.0eframe版本：0.22.0上一篇：这里 TextEdit 文本编辑框 其定义为&#…...
Redis内存空间预估与内存优化策略：保障数据安全与性能的架构实践
推荐阅读 AI文本 OCR识别最佳实践 AI Gamma一键生成PPT工具直达链接 玩转cloud Studio 在线编码神器 玩转 GPU AI绘画、AI讲话、翻译,GPU点亮AI想象空间 资源分享 史上最全文档AI绘画stablediffusion资料分享 AI绘画关于SD,MJ,GPT,SDXL百科全书 「java、python面试题」…...
【zookeeper】zookeeper集群安装
环境规划 实际的生产使用中，我们一般推荐搭建奇数多节点的zookeeper集群，如3/5/7。在本次测试中，我使用了centos7 三台服务器搭建，复用了我搭建k8s集群的环境，如下表。 IPhostname192.168.2.140k8s-m1192.168.2.141k…...
CUDA小白 - NPP(2) - Arithmetic and Logical Operations(1)
cuda小白 原文链接 NPP GPU架构近些年也有不少的变化，具体的可以参考别的博主的介绍，都比较详细。还有一些cuda中的专有名词的含义，可以参考《详解CUDA的Context、Stream、Warp、SM、SP、Kernel、Block、Grid》 常见的NppStatus，…...
计算机视觉-LeNet
目录 LeNet LeNet在手写数字识别上的应用 LeNet在眼疾识别数据集iChallenge-PM上的应用 LeNet LeNet是最早的卷积神经网络之一。1998年，Yann LeCun第一次将LeNet卷积神经网络应用到图像分类上，在手写数字识别任务中取得了巨大成功。LeNet通过连续使用…...
Java 复习笔记 - 面向对象篇
文章目录 一，面向对象概述二，类和对象（一）类和对象的概述（二）定义类的补充注意事项 三，封装四，就近原则和this关键字（一）就近原则（二）…...
行业追踪，2023-08-31
自动复盘 2023-08-31 凡所有相，皆是虚妄。若见诸相非相，即见如来。 k 线图是最好的老师，每天持续发布板块的rps排名，追踪板块，板块来开仓，板块去清仓，丢弃自以为是的想法，板块去留让…...
科技资讯|苹果发布新专利：可在车内定位苹果的智能设备
根据美国商标和专利局近期公示的清单，苹果公司获得了一项名为《车内定位移动设备的系统和方式》专利，概述了在车内狭窄空间内如何定位 iPhone 等移动设备。 Find My 服务现阶段没有使用 UWB 来追踪 iPhone 或者 iPad，而是依赖 GPS 等相关辅…...
浅析Linux SCSI子系统：IO路径
文章目录 概述scsi_cmd：SCSI命令result字段proto_op字段proto_type字段 SCSI命令下发scsi_request_fnscsi_dev_queue_readyscsi_host_queue_ready SCSI命令响应命令请求完成的软中断处理 相关参考 概述 SCSI子系统向上与块层对接，由块层提交的对块设备的…...
linux系统（centos、Ubuntu、银河服务器）备份
制作u盘启动盘 下载usblive系统镜像 Get Kali | Kali Linux 下载u盘启动工具 balenaEtcher - Flash OS images to SD cards & USB drives 点击下载，等待下载完成 双击安装，等待安装完成 双击 启动 选择镜像 选择U盘 开始烧录 等地制作完成 进入…...
堆栈深度超过限制
报错：Cause: com.kingbase8.util.KSQLException: 错误: 堆栈深度超过限制 Hint: 在确定了平台的堆栈深度限制是足够大后，增加配置参数 "max_stack_depth"的值(当前值为2048kB).; 错误: 堆栈深度超过限制 Hint: 在确定了平台的堆栈深度限制是足…...
Linux ptrace系统调用
文章目录 一、ptrace 简介二、ptrace 参数request2.1 PTRACE_TRACEME2.2 PTRACE_PEEKTEXT, PTRACE_PEEKDATA2.3 PTRACE_PEEKUSER2.4 PTRACE_POKETEXT, PTRACE_POKEDATA2.5 PTRACE_POKEUSER2.6 PTRACE_GETREGS, PTRACE_GETFPREGS2.7 PTRACE_GETREGSET2.8 PTRACE_SETREGS, PTRACE…...
CSDN每日一练 |『贝博士发奖金』『Longest Continuous Increasing Subsequence』『最小差值』2023-09-01
CSDN每日一练 |『贝博士发奖金』『Longest Continuous Increasing Subsequence』『最小差值』2023-09-01 一、题目名称：贝博士发奖金二、题目名称：Longest Continuous Increasing Subsequence三、题目名称：最小差值一、题目名称：贝博士发奖金 时间限制：1000ms内存限制：25…...
二维数组创建方式比较
暑假跟着地质队去跑山了，到现在还没结束，今天休息的时候突然刷到了一篇关于C二维数组创建方面的文章，我觉得还是非常不错滴，就将其中提到的新方法和我已经使用过的三种方法进行了比较，发现该方法提高了二维数组的分配、…...
安达发|富士康科技集团利用自动排程APS软件打造智慧工厂
富士康科技集团作为全球领先的3C产品研发制造企业，近年来积极布局智能制造领域，通过引入先进的自动化排程系统(APS),成功打造了智慧工厂，提高了生产质量与效率，降低了生产成本。 富士康集团自2019年下半年提出在观澜厂区建立数字可…...
云计算在大数据分析中的应用与优势
文章目录 云计算在大数据分析中的应用云计算在大数据分析中的优势云计算在大数据分析中的示例未来发展和拓展结论 🎉欢迎来到AIGC人工智能专栏~云计算在大数据分析中的应用与优势 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒🍹✨博客主页：IT陈寒的博客&…...
linux————ELK（日志收集系统集群）
目录 一、为什么要使用ELK 二、ELK作用 二、组件 一、elasticsearch 特点 二、logstash 工作过程 INPUT（输入） FILETER(过滤) OUTPUTS（输出） 三、kibana 三、架构类型 ELK ELKK ELFK ELFKK EFK 四、构建ELk集群…...
Leetcode213 打劫家舍2
思路：既然头尾不能同时取，那就分别算只取头或者只取尾，不考虑特殊情况的话是一个简单的动态规划 class Solution:def rob(self, nums: list[int]) -> int:if len(nums) < 3:return max(nums)max_sum [nums[0], max(nums[1], nums[0])…...
Redis全局命令
"那篝火在银河尽头~" Redis-cli命令启动 现如今，我们已经启动了Redis服务，下⾯将介绍如何使⽤redis-cli连接、操作Redis服务。客户端与服务端交互的方式有两种: ● 第⼀种是交互式⽅式: 后续所有的操作都是通过交互式的⽅式实现，…...
Xml转json
利用fastjson转换，pom文件依赖： <dependency><groupId>dom4j</groupId><artifactId>dom4j</artifactId><version>1.6.1</version> </dependency> <dependency><groupId>com.alibaba</groupId><artifa…...
Spring框架知识点汇总
01.Spring框架的基本理解 关键字：核心思想IOC/AOP，作用（解耦，简化），简单描述框架组成； Spring框架是一款轻量级的开发框架，核心思想是IOC（反转控制）和AOP&a…...
JavaScript Web APIs - 06 正则表达式
Web APIs - 06 文章目录 Web APIs - 06正则表达式正则基本使用元字符边界符量词范围字符类 替换和修饰符正则插件change 事件判断是否有类 目标：能够利用正则表达式完成小兔鲜注册页面的表单验证，具备常见的表单验证能力 正则表达式综合案例阶段案例 正…...
Python入门教程 | Python3 字符串
字符串是 Python 中最常用的数据类型。我们可以使用引号( ’ 或 " )来创建字符串。 创建字符串很简单，只要为变量分配一个值即可。例如： var1 Hello World! var2 "Tarzan"Python 访问字符串中的值 Python 不支持单字符类型ÿ…...
Playwright for Python：安装及初步使用
文章目录 一、Playwright介绍1.1 简单介绍1.2 支持的平台1.3 支持语言1.4 官方文档（python） 二、开始2.1 安装要求2.2 安装2.3 脚本录制2.4 代码示例 一、Playwright介绍 1.1 简单介绍 Playwright是微软推出来的一款自动化测试工具，是专门为…...
Ubuntu 20.04.5 怎么安装微信
这是我的ubutun版本号 在这个系统装桌面版微信很多功能不健全。搜索了很多方法，这个算是不错的一个法子。 1.添加仓库 首次使用时，你需要运行如下一条命令将移植仓库添加到系统中。 wget -O- https://deepin-wine.i-m.dev/setup.sh | sh 2.应用安装 …...
HummerRisk V1.4.0发布
大家好，HummerRisk 1.4.0和大家见面了，在这个版本中我们变更了多云检测的底层逻辑，增加了每次检测的project概念，更好的去支持检测历史和检索需要，增加阿里云最佳实践中资源监控检测规则，增加资源态势中的细…...
C语言每日一练----Day(12)
本专栏为c语言练习专栏，适合刚刚学完c语言的初学者。本专栏每天会不定时更新，通过每天练习，进一步对c语言的重难点知识进行更深入的学习。 今日练习题关键字：最大连续1的个数 完全数计算 💓博主csdn个人主页࿱…...
【Tkinter系列11/15】小部件 （Text）
24. 小部件Text 文本小部件是一种更通用的方法 处理比小部件多行文本。文本小部件几乎是一个完整的文本 窗口中的编辑器：Label 您可以将文本与不同的字体、颜色和 背景。 您可以用文本穿插嵌入的图像。一 图像被视为单个字符。请参见第 24.3 节 “文本小部件图像”…...
通过「内网穿透」技术，实现出差期间远程访问企业局域网中的象过河ERP系统
文章目录 概述1.查看象过河服务端端口2.内网穿透3. 异地公网连接4. 固定公网地址4.1 保留一个固定TCP地址4.2 配置固定TCP地址 5. 使用固定地址连接 概述 ERP系统对于企业来说重要性不言而喻，不管是财务、生产、销售还是采购，都需要用到ERP系统来协助。…...