前端 CSS 经典:图片边框

news/2024/7/25 1:18:59/文章来源:https://blog.csdn.net/weixin_64684095/article/details/139164761

前言:有这么一个业务,需要边框随着图片宽度的变化而变化,比如一些聊天的气泡框等。

实现原理:使用 border-image 属性

效果图:

 实现代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>图片边框</title><style>body {background: #000;}.text-box {color: white;text-align: center;padding: 5em;margin: 200px auto;width: 70%;border: 50px solid #fff;/* 边框图片源 */border-image-source: url("border.png");/* 切割,四个角 */border-image-slice: 50;/* 中间部分重复 */border-image-repeat: round;/* 缩写为 *//* border-image: url("border.png") 50 round; */}</style></head><body><div class="text-box"><p>撒可见度回复看似简单哈佛考虑江哈斯的风口浪尖和撒旦可立即返回考虑撒旦回复我开始接触可能想看机会疯狂叫啥的库哈斯快递费好看了解撒电话看两家后即可和</p></div><script></script></body>
</html>

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

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

相关文章

vue项目中使用json编辑器

实现效果&#xff1a; 借助插件json-editor-vue3实现效果如图一&#xff0c;如果嫌丑可以通过类名改一下样式如图二。 实现过程&#xff1a; 安装插件&#xff1a;npm install json-editor-vue3 文档链接&#xff1a;GitCode - 开发者的代码家园 <script setup name&quo…

day17

第一题 本题可以采用快速排序的思想&#xff0c;适应随机数指定和三指针划分数组为三个区域的思想&#xff1a; 其中指针的移动细节如上题故事&#xff0c;如下所示&#xff1a; 当a区域的商都大于k时&#xff0c;我们要查找的k位置元素就在左区域&#xff0c;我们进一步在左区…

【LORA协议栈】工作记录

一、硬件资源 MCU型号&#xff1a;STM32F401xE。Lora芯片&#xff1a;SX1276。硬件看门狗。ATT7022E三相电能专用计量芯片。 二、功能简介 作为一个组件&#xff0c;通过485与网关或者各种子设备连接在一起。支持boot升级。通过SPI与LORA芯片通信。接收和发送数据。有3路通信…

vue3 调用本地exe

1、注册表注册 在注册表中直接按照图2注册数据&#xff1b;也可以按照图3注册表的文件创建文档&#xff0c;然后点击打开&#xff0c;将会将注册表写入window系统。 图2 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\F1] "URL:F1 Protocol Handler" &q…

Rust 赋能前端 -- 写一个 File 转 Img 的功能

所有耀眼的成绩,都需要苦熬,熬得过,出众;熬不过,出局 大家好,我是柒八九。一个专注于前端开发技术/Rust及AI应用知识分享的Coder 此篇文章所涉及到的技术有 Rustwasm-bindgen/js-sys/web-sysWeb WorkerWebAssemblyWebpack/Vite配置WebAssemblyOffscreenCanvas脚手架生成项…

Android Ktor 网络请求框架

Ktor 是一个由 JetBrains 开发的用于 Kotlin 编程语言的应用框架&#xff0c;旨在创建高性能的异步服务器和客户端应用程序。由于完全基于 Kotlin 语言&#xff0c;Ktor 能够让开发者编写出简洁、可读性强且功能强大的代码&#xff0c;特别适合那些已经熟悉 Kotlin 的开发人员。…

提取COCO 数据集的部分类

1.python提取COCO数据集中特定的类 安装pycocotools github地址&#xff1a;https://github.com/philferriere/cocoapi pip install githttps://github.com/philferriere/cocoapi.git#subdirectoryPythonAPI若报错&#xff0c;pip install githttps://github.com/philferriere…

ROS运行文件(LaunchFile)和参数(Parameter)

本文主要介绍ROS的Launch File和Parameter概念&#xff0c;通过Launch File启动单个或多个节点&#xff0c;并通过Parameter配置启动参数。 更多内容&#xff0c;访问专栏目录获取实时更新。 当你的应用中包含了很多工作包&#xff0c;每个工作包了又包含了多个节点时&#xff…

香橙派AIpro开发板初体验

香橙派AIpro开发板初体验 一、引言 在当前的AI发展浪潮中&#xff0c;边缘计算逐渐成为了研究的热点。香橙派AIpro开发板作为一款基于昇腾AI技术的开发板&#xff0c;凭借其强大的算力和丰富的接口&#xff0c;为AI边缘计算提供了强大的支持。最近&#xff0c;我也是拿到了官…

VUE3 学习笔记(6):data数据的监听、表单绑定、操作DOM

data数据的监听&#xff08;侦听&#xff09; 对于data的值的监听&#xff0c;可以用watch中与data中的参数命名一致的值做为函数进行获取监听变动前后的值再做逻辑判断&#xff0c;如下图所示。 示例代码 <template><div><p :class"classDemo">{…

用Python实现办公自动化

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…

机器学习-3-特征工程的重要性及常用特征选择方法

参考特征重要性:理解机器学习模型预测中的关键因素 参考[数据分析]特征选择的方法 1 特征重要性 特征重要性帮助我们理解哪些特征或变量对模型预测的影响最大。 特征重要性是数据科学中一个至关重要的概念,尤其是在建立预测性任务的模型时。想象你正在尝试预测明天是否会下…

Docker部署SpringBoot项目(jar包+Mysql)

部署Java项目 项目准备准备Java项目镜像准备配置网络 部署项目细节展示 项目准备 准备Java项目 hmall项目是一个maven聚合项目&#xff0c;使用IDEA打开hmall项目&#xff0c;查看项目结构如图&#xff1a; 我们要部署的就是其中的hm-service&#xff0c;其中的配置文件采用…

开源与闭源:AI大模型发展路径的博弈

一、引言 在人工智能&#xff08;AI&#xff09;领域&#xff0c;大模型以其卓越的性能和广泛的应用前景&#xff0c;成为了近年来技术发展的热点。然而&#xff0c;在大模型的发展路径上&#xff0c;开源与闭源两种模式一直存在着激烈的博弈。本文将深入探讨这两种模式在大模…

python-合并排列数组 I

问题描述&#xff1a;合并两个按升序排列的整数数组a和b&#xff0c;形成一个新数组&#xff0c;新数组也要按升序排列。 问题示例&#xff1a;输入A[1],B[1],输出[1,1],返回合并后的数组。输入A[1,2,3,4],B[2,4,5,6],输出[1,2,2,3,4,4,5,6],返回合并所有元素后的数组。 完整代…

【旋转链表】python

目录 题目&#xff1a; 思路&#xff1a; 代码&#xff1a; 题目&#xff1a; 思路&#xff1a; 求链表长度&#xff1b;找出倒数第 k1 个节点&#xff1b; 3.链表重整&#xff1a;将链表的倒数第 k1 个节点和倒数第 k个节点断开&#xff0c;并把后半部分拼接到链表的头部。…

CTFHUB技能树——SSRF(一)

目录 一、SSRF(服务器端请求伪造) 漏洞产生原理: 漏洞一般存在于 产生SSRF漏洞的函数&#xff08;PHP&#xff09;&#xff1a; 发现SSRF漏洞时&#xff1a; SSRF危害&#xff1a; SSRF漏洞利用手段&#xff1a; SSRF绕过方法&#xff1a; 二、CTFHUB技能树 SSRF 1.Ht…

[JAVASE] String类 StringBuffer类 StringBuilder类

目录 一.String类 1.1 String字符串不可变的原因 1.2 字符串中的比较方法 1.2.1 equals 1.2.2 compareTo 与 compareToIgnoreCase 1.3 字符串中的查找方法 1.3.1 charAt 1.3.2 indexOf 与 lastIndexOf 1.4 字符串中的转换方法 1.4.1 valueOf 1.4.2 toUpperCase 与 to…

我和jetson-Nano的故事(12)——安装pytorch 以及 torchvision

在jetson nano中安装Anaconda、pytorch 以及 torchvision 1.Pytorch下载安装2.Torchvision安装 1.Pytorch下载安装 首先登录英伟达官网下载Pytorch安装包&#xff0c;这里以PyTorch v1.10.0为例 安装依赖库 sudo apt-get install libjpeg-dev zlib1g-dev libpython3-dev liba…

做好开源快速开发平台研发创新 助力行业高效发展!

随着信息化时代的到来&#xff0c;科技的力量无处不在。为了提高办公效率&#xff0c;很多大中型企业倾向于使用更为先进的软件平台来助力企业降本增效。在众多助力神器之中&#xff0c;开源快速开发平台低代码技术平台深得广大新老客户朋友的喜爱&#xff0c;它与生俱来的优势…