css 使用图片作为元素边框

先看原始图片

再看效果

边框的四个角灭有拉伸变形,但是图片的中部是拉伸的

代码

border-style: solid;/* 设置边框图像的来源 */border-image-source: url('/static/images/mmwz/index/bk_hd@3x.png');/* 设置如何切割图像 */border-image-slice: 66;/* 设置边框的宽度 */border-image-width: 26px;/* 设置图像如何在边框区域内重复 */border-image-repeat: stretch;

也可以简写为

border-image: url('/static/images/mmwz/index/bk_hd@3x.png') 66/26px stretch;
border-style: solid;

也可以使用border-width调整边框宽度,以布局内容

border-width: 11px;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/61244.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【阅读记录-章节1】Build a Large Language Model (From Scratch)

目录 1. Understanding large language models1.1 What is an LLM?补充介绍人工智能、机器学习和深度学习的关系机器学习 vs 深度学习传统机器学习 vs 深度学习(以垃圾邮件分类为例) 1.2 Applications of LLMs1.3 Stages of building and using LLMs1.4…

【WSL+Ubuntu】默认用户被意外变更为 root 后切回原来的默认用户

引言 在使用 Windows Subsystem for Linux (WSL) Ubuntu 时,在 ~ 目录下使用 ls 命令,发现所有文件都消失了,让我误以为文件被清空了。实际上是因为WSL Ubuntu的默认用户被意外地改变为了 root。那么,如何恢复并切回原来的默认用…

模式:每个服务一个数据库

Pattern: Database per service。 背景 如用微服务架构模式开发一个在线商店应用程序。大多数服务需要在某种数据库中持久化数据。如,订单服务存储订单信息,而客户服务存储客户信息。 问题 微服务应用程序中的数据库架构是什么? 驱动力…

Acme PHP - Let‘s Encrypt

Lets Encrypt是一个于2015年三季度推出的数字证书认证机构,旨在以自动化流程消除手动创建和安装证书的复杂流程,并推广使万维网服务器的加密连接无所不在,为安全网站提供免费的SSL/TLS证书。 使用PHP来更新证书: Acme PHP | Rob…

如何实现主备租户的无缝切换 | OceanBase应用实践

对于DBA而言,确保数据库的高可用性、容灾等能力是其日常工作中需要持续思考和关注的重要事项。一方面,可以利用数据库自身所具备的功能来实现这些目标;若数据库本身不提供相应功能,DBA则需寻找其他工具来增强数据库的高可用性和容…

超越GPT-4o-mini | 北大开源「国产o1」大模型,{多阶段自主推理}让小模型也能“放大招“!

01、LLaVA-o1背景简介 以OpenAI o1为代表的大型语言模型展示了强大的推理能力,这充分的验证了语言模型推理时间缩放的有效性。然而,视觉对于使模型能够充分理解世界并扩展其认知能力同等重要。因此,开发一个融合语言和视觉的多模态模型&#…

Unity类银河战士恶魔城学习总结(P126 Item ToolTip物品提示)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址:https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了把鼠标放到物品上面就会显示物品属性 UI_ItemTooltip.cs 功能实现:该脚本的核心功能是展示和隐藏物品的工具提示…

11.13机器学习_线性回归

十 集成学习方法之随机森林 机器学习中有一种大类叫集成学习(Ensemble Learning),集成学习的基本思想就是将多个分类器组合,从而实现一个预测效果更好的集成分类器。集成算法可以说从一方面验证了中国的一句老话:三个…

【机器学习】数学知识:欧式距离(Euclidean Distance)和曼哈顿距离(Manhattan Distance)

欧式距离和曼哈顿距离是两种常用的距离度量方法,用于衡量两点之间的相似性或差异性。它们在几何分析、数据挖掘、机器学习等领域有广泛应用。 1. 欧式距离 概念 欧式距离(Euclidean Distance)是最常见的直线距离度量方法,源于欧…

hydra基础知识

hydra基础知识 1、yaml的使用 1.1 基础介绍 主要是用来写配置文件 优势: 层级式可以写注释安装: pip install pyyaml1.2 语法 2、omegaconf 2.1 基础介绍 为什么需要omegaconf? omegaconf主要是对python原生的字典,列表类型的增强,通过omegaconf能够更好的处理yaml…

递归(3)----力扣40组合数2,力扣473火柴拼正方形

给定一个候选人编号的集合 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的每个数字在每个组合中只能使用 一次 。 注意:解集不能包含重复的组合。 示例 1: 输入: candidates [10,1,2,7,6,1…

RPC-健康检测机制

什么是健康检测? 在真实环境中服务提供方是以一个集群的方式提供服务,这对于服务调用方来说,就是一个接口会有多个服务提供方同时提供服务,调用方在每次发起请求的时候都可以拿到一个可用的连接。 健康检测,能帮助从连…

Android WMS概览

WMS(WindowManagerService)是 Android 系统的核心服务,负责管理应用和系统的窗口,包括窗口的创建、销毁、布局、层级管理、输入事件分发以及动画显示等。它通过协调 InputManager 和 SurfaceFlinger 实现触摸事件处理和窗口渲染&a…

4.STM32之通信接口《精讲》之USART通信---实验串口发送程序

本节将进行实战,基础了解请查看第1,2,3节(Whappy) 开始背!! USART ---》全双工 异步/同步 点对点 C语言基础printf用法,这节将用到printf的重定向,来打印到串口助手上…

Kotlin return与return@forEachIndexed

Kotlin return与returnforEachIndexed fun main() {val data arrayOf(0, 1, 2, 3, 4)println("a")data.forEachIndexed { index, v ->if (v 2) {//类似while循环中的continue//跳过,继续下一个forEachIndexed迭代returnforEachIndexed}println("…

Cherno OpenGL(28 ~ 33)

批量渲染-介绍 在这里我们将在一个drawcall打包多个几何体。即 batch geometry。 我们在这里将聚焦于2d渲染,我们如何渲染一堆2d的quads或者说rectangles呢? 一种情况是比如一个2d游戏有很多个tile组成,要去渲染这些tile;另一种…

缺失值异常值的处理导入数据插值拟合工具箱

文章目录 1.构造数据2.缺失值的处理3.异常值的处理4.导入数据的注意事项5.插值拟合工具箱使用 1.构造数据 下面的这个就是生成这个正态分布的数据,这个时候我们的这个数据里面是没有这个异常的数据的,因此这个时候我们可以自己创造这个异常的数据&#…

FPGA开发流程

注:开发板:小梅哥的ACX720。本实验可直接运行在小梅哥的ACX720开发板上,后续的实验都可直接运行在小梅哥的ACX720上。 一、打开VIVADO并创建工程 1、双击VIVADO图标,打开vivado。 2、打开vivado界面打,点击有 Create …

知识库管理系统:企业数字化转型的加速器

在数字化转型的大潮中,知识库管理系统(KBMS)已成为企业提升效率和创新能力的关键工具。本文将探讨知识库管理系统的定义、企业建立知识库的必要性,以及如何快速搭建企业知识库。 知识库管理系统是什么? 知识库管理系统…

.NET桌面应用架构Demo与实战|WPF+MVVM+EFCore+IOC+DI+Code First+AutoMapper

目录 .NET桌面应用架构Demo与实战|WPFMVVMEFCoreIOCDICode FirstAutoPapper技术栈简述项目地址:功能展示项目结构项目引用1. 新建模型2. Data层,依赖EF Core,实现数据库增删改查3. Bussiness层,实现具体的业务逻辑4. Service层&am…