深入理解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服务。客户端与服务端交互的方式有两种: ● 第⼀种是交互式⽅式: 后续所有的操作都是通过交互式的⽅式实现，…...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
Appium+python自动化（十六）- ADB命令
简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
【论文阅读28】-CNN-BiLSTM-Attention-（2024）
本文把滑坡位移序列拆开、筛优质因子，再用 CNN-BiLSTM-Attention 来动态预测每个子序列，最后重构出总位移，预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵（S…...
selenium学习实战【Python爬虫】
selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...
)
Angular微前端架构：Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例，其中使用的是 Module Federation 和 npx-build-plus 实现了主应用（Shell）与子应用（Remote）的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？
Redis 的发布订阅（Pub/Sub）模式与专业的 MQ（Message Queue）如 Kafka、RabbitMQ 进行比较，核心的权衡点在于：简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具，可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件，也不需要在线上传文件，保护您的隐私。 工具截图 主要特点 🚀 快速转换：本地转换，无需等待上…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1）准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2）服务端安装软件：bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...
Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统
💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐：「storms…...