css 使用图片作为元素边框

server/2024/11/19 8:44:40/

先看原始图片

再看效果

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

代码

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.ppmy.cn/server/143131.html

相关文章

文章解读与仿真程序复现思路——电力系统自动化EI\CSCD\北大核心《基于改进容积卡尔曼滤波的含光伏配电网动态状态估计》

本专栏栏目提供文章与程序复现思路,具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

用 Python 从零开始创建神经网络(五):损失函数(Loss Functions)计算网络误差

用损失函数(Loss Functions)计算网络误差 引言1. 分类交叉熵损失(Categorical Cross-Entropy Loss)2. 分类交叉熵损失类(The Categorical Cross-Entropy Loss Class)展示到目前为止的所有代码3. 准确率计算…

【leetcode】LCR150.彩灯装饰记录Ⅱ

cpp实现 #include<vector> using namespace std; #include<queue> #include<iostream>//* Definition for a binary tree node. struct TreeNode {int val;TreeNode *left;TreeNode *right;TreeNode() : val(0), left(nullptr), right(nullptr) {}TreeNode…

使用 .NET 创建新的 WPF 应用

本教程介绍如何使用 Visual Studio 创建新的 Windows Presentation Foundation &#xff08;WPF&#xff09; 应用。 使用 Visual Studio&#xff0c;可以向窗口添加控件以设计应用的 UI&#xff0c;并处理这些控件中的输入事件以与用户交互。 在本教程结束时&#xff0c;你有一…

已有docker增加端口号,不用重新创建Docker

已有docker增加端口号&#xff0c;不用重新创建Docker 1. 整体描述2. 具体实现2.1 查看容器id2.2 停止docker服务2.3 修改docker配置文件2.4 重启docker服务 3. 总结 1. 整体描述 docker目前使用的非常多&#xff0c;但是每次更新都需要重新创建docker&#xff0c;也不太方便&…

软件工程-软件体系结构设计

1、软件的复杂性 、 处理的复杂性 2、软件体系结构的概念

.NET 9中数据集合类型及其性能比较与应用场景分析

数据集合类型及性能 1&#xff09;List<T>&#xff1a;基于数组的列表&#xff0c;随机访问速度快&#xff0c;插入和删除操作较慢&#xff08;需移动元素&#xff09;。2&#xff09;ArrayList&#xff1a;与List<T>类似&#xff0c;但可以存储不同类型的元素&…

【网络安全面经】技术性问题3

11. 一次完整的 HTTP 请求过程 域名解析&#xff1a;通过 DNS 将域名转换为 IP 地址&#xff0c;如上述 DNS 的工作原理。建立 TCP 连接&#xff1a;客户端向服务器发送 SYN 报文段&#xff0c;经过三次握手建立 TCP 连接。发送 HTTP 请求&#xff1a;客户端向服务器发送 HTTP…