当前位置：首页 > news >正文

深入理解css3背景图边框

news 2026/5/22 5:01:56

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设置的是除四角外其他部分的显示方式。截图来自菜鸟教…...

编程日记 2023/9/1 14:14:46

【rust/egui】(六)看看template的app.rs：TextEdit

说在前面 rust新手，egui没啥找到啥教程，这里自己记录下学习过程环境：windows11 22H2rust版本：rustc 1.71.1egui版本：0.22.0eframe版本：0.22.0上一篇：这里 TextEdit 文本编辑框其定义为&#…...

编程日记 2023/9/1 14:13:44

Redis内存空间预估与内存优化策略：保障数据安全与性能的架构实践

推荐阅读 AI文本 OCR识别最佳实践 AI Gamma一键生成PPT工具直达链接玩转cloud Studio 在线编码神器玩转 GPU AI绘画、AI讲话、翻译,GPU点亮AI想象空间资源分享史上最全文档AI绘画stablediffusion资料分享 AI绘画关于SD,MJ,GPT,SDXL百科全书「java、python面试题」…...

编程日记 2023/9/1 14:12:43

【zookeeper】zookeeper集群安装

环境规划实际的生产使用中，我们一般推荐搭建奇数多节点的zookeeper集群，如3/5/7。在本次测试中，我使用了centos7 三台服务器搭建，复用了我搭建k8s集群的环境，如下表。 IPhostname192.168.2.140k8s-m1192.168.2.141k…...

编程日记 2023/9/1 14:11:42

CUDA小白 - NPP(2) - Arithmetic and Logical Operations(1)

cuda小白原文链接 NPP GPU架构近些年也有不少的变化，具体的可以参考别的博主的介绍，都比较详细。还有一些cuda中的专有名词的含义，可以参考《详解CUDA的Context、Stream、Warp、SM、SP、Kernel、Block、Grid》常见的NppStatus&#xff0c…...

编程日记 2023/9/1 14:10:41

计算机视觉-LeNet

目录 LeNet LeNet在手写数字识别上的应用 LeNet在眼疾识别数据集iChallenge-PM上的应用 LeNet LeNet是最早的卷积神经网络之一。1998年，Yann LeCun第一次将LeNet卷积神经网络应用到图像分类上，在手写数字识别任务中取得了巨大成功。LeNet通过连续使用…...

编程日记 2023/9/1 14:09:40

Java 复习笔记 - 面向对象篇

文章目录一，面向对象概述二，类和对象（一）类和对象的概述（二）定义类的补充注意事项三，封装四，就近原则和this关键字（一）就近原则（二）…...

编程日记 2023/9/1 14:08:38

行业追踪，2023-08-31

自动复盘 2023-08-31 凡所有相，皆是虚妄。若见诸相非相，即见如来。 k 线图是最好的老师，每天持续发布板块的rps排名，追踪板块，板块来开仓，板块去清仓，丢弃自以为是的想法，板块去留让…...

编程日记 2023/9/1 14:07:37

科技资讯|苹果发布新专利：可在车内定位苹果的智能设备

根据美国商标和专利局近期公示的清单，苹果公司获得了一项名为《车内定位移动设备的系统和方式》专利，概述了在车内狭窄空间内如何定位 iPhone 等移动设备。 Find My 服务现阶段没有使用 UWB 来追踪 iPhone 或者 iPad，而是依赖 GPS 等相关辅…...

编程日记 2023/9/1 14:06:35

浅析Linux SCSI子系统：IO路径

文章目录概述scsi_cmd：SCSI命令result字段proto_op字段proto_type字段 SCSI命令下发scsi_request_fnscsi_dev_queue_readyscsi_host_queue_ready SCSI命令响应命令请求完成的软中断处理相关参考概述 SCSI子系统向上与块层对接，由块层提交的对块设备的…...

编程日记 2023/9/1 14:05:33

linux系统（centos、Ubuntu、银河服务器）备份

制作u盘启动盘下载usblive系统镜像 Get Kali | Kali Linux 下载u盘启动工具 balenaEtcher - Flash OS images to SD cards & USB drives 点击下载，等待下载完成双击安装，等待安装完成双击启动选择镜像选择U盘开始烧录等地制作完成进入…...

编程日记 2023/9/1 14:04:32

堆栈深度超过限制

报错：Cause: com.kingbase8.util.KSQLException: 错误: 堆栈深度超过限制 Hint: 在确定了平台的堆栈深度限制是足够大后，增加配置参数 "max_stack_depth"的值(当前值为2048kB).; 错误: 堆栈深度超过限制 Hint: 在确定了平台的堆栈深度限制是足…...

编程日记 2023/9/1 14:03:29

文章目录一、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…...

编程日记 2023/9/1 14:02:28

CSDN每日一练 |『贝博士发奖金』『Longest Continuous Increasing Subsequence』『最小差值』2023-09-01

CSDN每日一练 |『贝博士发奖金』『Longest Continuous Increasing Subsequence』『最小差值』2023-09-01 一、题目名称：贝博士发奖金二、题目名称：Longest Continuous Increasing Subsequence三、题目名称：最小差值一、题目名称：贝博士发奖金时间限制：1000ms内存限制：25…...

编程日记 2023/9/1 14:01:26

二维数组创建方式比较

暑假跟着地质队去跑山了，到现在还没结束，今天休息的时候突然刷到了一篇关于C二维数组创建方面的文章，我觉得还是非常不错滴，就将其中提到的新方法和我已经使用过的三种方法进行了比较，发现该方法提高了二维数组的分配、…...

编程日记 2023/9/1 14:00:25

安达发|富士康科技集团利用自动排程APS软件打造智慧工厂

富士康科技集团作为全球领先的3C产品研发制造企业，近年来积极布局智能制造领域，通过引入先进的自动化排程系统(APS),成功打造了智慧工厂，提高了生产质量与效率，降低了生产成本。富士康集团自2019年下半年提出在观澜厂区建立数字可…...

编程日记 2023/9/1 13:59:24

云计算在大数据分析中的应用与优势

文章目录云计算在大数据分析中的应用云计算在大数据分析中的优势云计算在大数据分析中的示例未来发展和拓展结论 🎉欢迎来到AIGC人工智能专栏~云计算在大数据分析中的应用与优势 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒🍹✨博客主页：IT陈寒的博客&…...

编程日记 2023/9/1 13:58:22

linux————ELK（日志收集系统集群）

目录一、为什么要使用ELK 二、ELK作用二、组件一、elasticsearch 特点二、logstash 工作过程 INPUT（输入） FILETER(过滤) OUTPUTS（输出） 三、kibana 三、架构类型 ELK ELKK ELFK ELFKK EFK 四、构建ELk集群…...

编程日记 2023/9/1 13:57:20

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])…...

编程日记 2023/9/1 13:56:19

Redis全局命令

"那篝火在银河尽头~" Redis-cli命令启动现如今，我们已经启动了Redis服务，下⾯将介绍如何使⽤redis-cli连接、操作Redis服务。客户端与服务端交互的方式有两种: ● 第⼀种是交互式⽅式: 后续所有的操作都是通过交互式的⽅式实现，…...

编程日记 2023/9/1 13:55:18

LeetCode--112. 路径总和（二叉树）

题目描述给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。判断该树中是否存在根节点到叶子节点的路径，这条路径上所有节点值相加等于目标和 targetSum 。如果存在，返回 true ；否则，返回 false 。叶子节点是指没…...

编程新知 2026/5/22 3:26:23

TensorFlow 2迁移学习实战：图像分类快速上手指南

我不能基于您提供的输入内容生成符合要求的博文。原因如下：输入内容严重缺失实质性项目信息：仅包含一篇已发表文章的元数据（标题、发布日期、作者名、平台名称、一句模糊口号“学习竞争对手”），完全没有提供任何关于 T…...

编程新知 2026/5/22 3:08:47

LangGraph Reducer 深度应用：为什么你的 State 合并总是出问题？

这篇文章帮你搞定 LangGraph Reducer 的高级用法，从源码解析到生产级模式，从并发安全到测试策略阅读提示适合谁看：已读过 State 设计模式基础，想深入 Reducer 机制的工程师看完能做什么：能实现生产级 Reducer&#x…...

编程新知 2026/5/22 0:22:19

LazyScrollView复用池机制：TMLazyReusePool工作原理深度解析

LazyScrollView复用池机制：TMLazyReusePool工作原理深度解析【免费下载链接】LazyScrollView An iOS ScrollView to resolve the problem of reusability in views. 项目地址: https://gitcode.com/gh_mirrors/la/LazyScrollView 在iOS开发中，视…...

编程新知 2026/5/21 23:26:42

fltk-rs常见问题解决方案：从编译错误到运行时问题的全面排查

fltk-rs常见问题解决方案：从编译错误到运行时问题的全面排查【免费下载链接】fltk-rs Rust bindings for the FLTK GUI library. 项目地址: https://gitcode.com/gh_mirrors/fl/fltk-rs fltk-rs是Rust语言的FLTK GUI库绑定，为开发者提供了轻量级…...

编程新知 2026/5/21 23:08:37