CSS揭秘:8.连续的图像边框

前置知识:CSS 渐变,5. 条纹背景,border-image,基本的 CSS 动画

前言

本文旨在实现图片边框效果,即在特定场景下让图片显示在边框而非背景区域。

一、传统实现方案

正常我们面对这样一个需求时,下意识会想到的就是,用图片做背景,再在上方覆盖内容区域,背景色为纯色。这样用两个元素就可以实现我们预期的效果。

<div class="something-meaningful"><div>I have a nice stone art border,don't I look pretty?</div>
</div>

.something-meaningful {background: url(https://img0.baidu.com/it/u=3535001583,268953038&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);background-size: cover;padding: 1em;
}.something-meaningful > div {background: white;padding: 1em;
}

在这里插入图片描述

这样就实现我们本篇的目标了,实现起来是相当简单了! 但有没有更合适的办法呢?比如尝试只用一个元素就实现这样的效果。

二、border-image

除了我们上述的方法,可能也有同学会想到 border-image 来实现图片边框,不妨直接试下。

/*** Basic border-image demo*/div {border: 40px solid transparent;border-image: 33.34% url('https://img0.baidu.com/it/u=3535001583,268953038&fm=253&fmt=auto&app=138&f=JPEG');padding: 1em;max-width: 20em;font: 130%/1.6 Baskerville, Palatino, serif;
}

在这里插入图片描述

通过图片我们可以发现,除了4个边角,每条边的填充都被拉伸了。
所以我们可以再考虑下 border-image 它的实现原理是什么样的
在这里插入图片描述

每个菱形的宽和高皆为 81 ÷ 3 = 27,所以我们将 border-image-slice 设置为 27,这样图像的角区域和边缘区域宽高皆为 27px。为了使每个菱形的中心恰好位于元素背景的边缘,我们将令 border-image-outset 等于 border-image-width 的一半。最后,将 border-image-repeat 设置为 round 使分割出的不同区域均匀贴合,没有裁剪或间隙。

div {border: 27px solid transparent;border-image: 33.34% url('https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image/border.png');padding: 1em;max-width: 20em;font: 130%/1.6 Baskerville, Palatino, serif;border-image-repeat: round;
}

在这里插入图片描述

所以 border-image 是将图片进行九宫格分割,然后填充在边框内。和我们本次的需求可以说没有太大的关系。

linear-gradient 方案

利用多重背景和 background-clip 实现单元素方案:

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white), url(stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;

在这里插入图片描述
实现原理

  1. 通过 background 设置多重背景:

  2. 底层为图片背景
    上层用 linear-gradient 创建纯色背景 通过 background-clip 分别控制背景显示范围,实现边框背景效果。

小结

设置背景边框 就是通过正常的background 设置背景, 通过 linear-gradientbackground-clip 的能力来将内容区域的背景描述出来;

这样,两个背景叠加就可以实现边框背景的效果。

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

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

相关文章

Linux驱动学习day20(pinctrl子系统驱动大全)

一、Pinctrl作用Pinctrl(Pin Controller)&#xff1a;控制引脚引脚的枚举与命名、引脚复用、引脚配置。Pinctrl驱动一般由芯片原厂的BSP工程师来写&#xff0c;一般驱动工程师只需要在设备树中指明使用哪个引脚&#xff0c;复用为哪个功能、配置为哪些状态。二、Pin Controller…

Debiased All-in-one Image Restoration with Task Uncertainty Regularization

Abstract 一体化图像恢复是一项基础的底层视觉任务&#xff0c;在现实世界中有重要应用。主要挑战在于在单个模型中处理多种退化情况。虽然当前方法主要利用任务先验信息来指导恢复模型&#xff0c;但它们通常采用统一的多任务学习&#xff0c;忽略了不同退化任务在模型优化中的…

逆向 qq 音乐 sign,data, 解密 response 返回的 arraybuffer

解密 arraybuffer python requests 请求得到 arraybuffer&#xff0c;转为 hex 传递给 js res_data sign ctx.call("decrypt", response.content.hex())function decrypt(hex) {const bytes new Uint8Array(hex.length / 2);for (let i 0; i < hex.length; i …

PPT处理控件Aspose.Slides教程:在 C# 中将 ODP 转换为 PPTX

您是否正在寻找可靠的 PowerPoint SDK 来以编程方式开发ODP到PPTX转换器&#xff1f;本篇博文演示了如何使用 C# 将 ODP 转换为 PPTX。ODP是一种基于 XML 的演示文稿文件&#xff0c;可能包含图像、视频、文本等。但是&#xff0c;将打开的文档演示文稿转换为 PowerPoint 格式可…

[746] 使用最小花费爬楼梯

可以从下标0或者1作为起始位置————dp[0] dp[1] 0。一次性可以选择移动1次或者2次&#xff0c;故当下标>2的时候&#xff0c;到达2有可能是从下标0开始或者下标1开始&#xff0c;cost[0] or cost[1]&#xff1b;到达n&#xff0c;有可能是花费cost[n-1]到达&#xff0c…

树莓派vsftpd文件传输服务器的配置方法

在树莓派上安装和配置 vsftpd&#xff08;Very Secure FTP Daemon&#xff09;服务器的步骤如下&#xff1a; 1. 安装 vsftpd 打开终端&#xff0c;执行以下命令安装 vsftpd&#xff1a; sudo apt update sudo apt install vsftpd安装完成后&#xff0c;vsftpd 会自动启动。可以…

4.服务注册发现:微服务的神经系统

在微服务架构中,服务之间不再是固定连接,而是高度动态、短暂存在的。如何让每个服务准确找到彼此,是分布式系统治理的核心问题之一。服务注册发现机制,正如神经系统之于人体,承担着连接、协调、感知变化的关键角色。 本文将围绕 Netflix 开源的服务注册发现组件 Eureka 展…

基于Docker Compose部署Traccar容器与主机MySQL的完整指南

Traccar Docker镜像内嵌了H2数据库&#xff0c;该数据库容量有限&#xff0c;当达到一定容量时&#xff0c;定位数据无法写入会导致无法定位显示。为此有必要为Traccar 配置外部数据库。根据官网文档和自身经验我选择了MySQL。 参考的官方文档 软件环境为ubuntu server 24.04版…

paddlehub环境搭建和测试

目录1.环境搭建1.1 创建conda环境1.2 安装paddlepaddle和paddlehub1.3 安装依赖2. 移动端模型部署2.1 安装移动端模型2.2 测试3. 服务部署3.1 启动PaddleHub Serving3.2 发送预测请求1.环境搭建 1.1 创建conda环境 conda create --name paddlehub python3.8 conda activate p…

408第三季part2 - 计算机网络 - ip地址II

理解路由聚合就是从第一个不一样的往后全置为0题目这里一般来说会到达2个目的地址&#xff0c;但中间有个路由&#xff0c;所以路由聚合一下就行了聚合出来这个然后下一跳就是跳到下一个路由器d前面一样的不动&#xff0c;不一样的开始全置为0c再次理解题目这个先匹配169.96.40…

【Unity】MiniGame编辑器小游戏(十一)消消乐【Crush】

更新日期:2025年7月9日。 项目源码:获取项目源码 索引 消消乐【Crush】一、游戏最终效果二、玩法简介三、正式开始1.定义游戏窗口类2.规划游戏窗口、视口区域3.方块 Block①.定义方块类②.生成方块所有类型③.生成消消乐棋盘④.绘制收集栏⑤.绘制方块阵列4.查看方块挡住的其他…

RK3588 Android SDK 实战全解析 —— 架构、原理与开发关键点

&#x1f4d6; 推荐阅读&#xff1a;《Yocto项目实战教程:高效定制嵌入式Linux系统》 &#x1f3a5; 更多学习视频请关注 B 站&#xff1a;嵌入式Jerry RK3588 Android SDK 实战全解析 —— 架构、原理与开发关键点 作者&#xff1a;嵌入式 Jerry 一、前言 随着 AIoT、工业智…

从救火到赋能:运维的职责演进与云原生时代的未来图景

引言:刻板印象的瓦解 提起"运维工程师",许多人脑海中可能仍会浮现这样的画面:深夜里守着闪烁的监控屏幕、手忙脚乱地重启服务器、在布满网线的机房里穿梭…这曾是运维工作的真实片段,但绝非全貌,更非未来。 在云计算、DevOps、SRE理念和云原生技术栈的冲击下,…

UDP的socket编程

socket接口int socket(int domain, int type, int protocol);参数说明​​参数说明domain协议族&#xff08;地址族&#xff09;&#xff0c;如 AF_INET&#xff08;IPv4&#xff09;、AF_INET6&#xff08;IPv6&#xff09;type套接字类型&#xff0c;UDP 使用 SOCK_DGRAM&…

基于SD-WAN的管件制造数字化产线系统集成方案

1. 背景与目标随着制造业向智能化、数字化方向转型&#xff0c;传统产线面临着数据割裂、协同效率低下等问题。管件制造作为典型场景&#xff0c;涉及多环节的设计、制造与质检流程&#xff0c;亟需一套高效的系统集成方案&#xff0c;保障全流程数据贯通与实时协同。本方案基于…

学习open62541 --- [79] 在docker中运行open62541工程

docker是非常流行的容器技术&#xff0c;解决了部署环境不一致的问题&#xff0c;open62541的工程也可以在docker容器中运行&#xff0c;本文讲述如何把open62541工程放到docker容器中运行。 本文使用WSL ubuntu 22.04作为宿主环境&#xff0c;其它linux也是一样。一 拉取debia…

Spring Boot微服务中集成gRPC实践经验分享

Spring Boot微服务中集成gRPC实践经验分享 一、业务场景描述 在某电商系统中&#xff0c;推荐服务、库存服务、订单服务等微服务需要高效、双向流式通信&#xff0c;RESTHTTP已无法满足低延迟、高并发和严格类型安全的需求。为此&#xff0c;我们选择在Spring Boot微服务中集成…

springboot项目编写测试类,乱码问题解决

​MockMvc 的默认行为​ MockMvc ​默认使用 ISO-8859-1 解码响应&#xff0c;而服务端实际返回 UTF-8 编码数据 。 Postman 无乱码是因浏览器自动识别编码&#xff0c;但 MockMvc 需显式配置。 ​过滤器失效场景​ Spring 的 CharacterEncodingFilter ​默认只对 POST 请求生效…

打破传统,开启 AR 智慧课堂​

在教育领域&#xff0c;AR 智慧课堂宛如一场及时雨&#xff0c;为传统教育模式带来了革命性的变革&#xff0c;让学习变得更加生动有趣、高效互动。通过 AR 技术&#xff0c;抽象的知识瞬间变得鲜活起来&#xff0c;学生们可以在虚拟与现实交织的世界中&#xff0c;探索历史的长…

热烈祝贺 Flink 2.0 存算分离入选 VLDB 2025

VLDB 2025 论文热烈祝贺 Apache Flink 2.0 的重磅研究成果《Disaggregated State Management in Apache Flink 2.0 》被数据库领域顶级会议 VLDB 2025 正式接收&#xff01;这项工作由 Apache Flink 社区 联合 阿里巴巴实时计算 Flink 团队 以及多位学术界研究人员共同完成&…