深入理解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服务。客户端与服务端交互的方式有两种: ● 第⼀种是交互式⽅式: 后续所有的操作都是通过交互式的⽅式实现，…...
华为云AI开发平台ModelArts
华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。 具体可参…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码，专为学校招生场景量身打造，功能实用且操作便捷。 从技术架构来看，ThinkPHP提供稳定可靠的后台服务，FastAdmin加速开发流程，UniApp则保障小程序在多端有良好的兼…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
Mac软件卸载指南，简单易懂！
刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"࿰…...
关于 WASM：1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种 低级字节码格式，可由高级语言（如 C、C、Rust&am…...
智能仓储的未来：自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”，物流的终极形态正在诞生 想象这样的场景： 凌晨3点，某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径；AI视觉系统在0.1秒内扫描包裹信息；数字孪生平台正模拟次日峰值流量压力…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
网站指纹识别
网站指纹识别 网站的最基本组成：服务器（操作系统）、中间件（web容器）、脚本语言、数据厍 为什么要了解这些？举个例子：发现了一个文件读取漏洞，我们需要读/etc/passwd，如…...