小程序图片使用filter后，设置border-radius失效

奋斗中的橘子 奋斗中的橘子 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.3k累计阅读 1.3k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄9年
关注
原创 最新推荐文章于 2026-09-02 11:14:19 发布 1.3k 阅读 AI 写同款· GEO 优化 ›
uni-app微信小程序登录页UI设计：从渐变背景到交互优化的全流程实践 在移动应用开发中，前端UI设计与用户体验优化是提升产品竞争力的关键环节。其核心原理在于通过合理的视觉层次、流畅的交互反馈与稳定的性能表现，构建直观高效的用户界面。对于跨平台开发场景，uni-app框架凭借其“一套代码多端运行”的能力，成为高效开发的重要技术选择。结合微信小程序平台特性，开发者需在遵循其设计规范的同时，解决键盘适配、表单验证、多登录方式集成等具体工程问题。本文聚焦于登录页这一高频场景，详细阐述了如何运用CSS3渐变、毛玻璃效果、动态样式绑定等前端技术，打造一个兼具美观与实用性的登录界面，并深入 阅读详情

在设置image的父元素使用border-radius、overflow:hidden属性

收录于
微信小程序

当前文章被收录于：

微信小程序
3 篇文章 0 人学习
订阅专栏 查看详情
标签
#filter #border-radius #小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
小程序集成AI问答机器人实战：基于百度智能云API的完整开发指南 API（应用程序编程接口）作为软件系统间通信的标准化方式，其核心原理是通过预定义的请求与响应格式，实现功能的复用与集成。在人工智能领域，大模型API将复杂的自然语言处理能力封装为易用的服务，为开发者提供了巨大的技术价值。这种模式使得开发者无需从零训练模型或搭建昂贵的算力基础设施，即可快速为应用注入智能交互能力。在工程实践中，结合微信小程序这类轻量级前端平台，通过后端服务调用云端AI API，成为构建智能问答、客服助手等应用的典型场景。本文以百度智能云的大模型API为例，详细解析了如何设计一个安全、高效的“小 阅读详情

相关推荐

uni-app nvue样式兼容性：从CSS报错到条件编译的完整解决方案

在跨平台应用开发中，CSS样式兼容性是一个常见挑战，尤其在追求原生性能的渲染模式下。其核心原理在于不同渲染引擎对CSS标准的支持度差异：WebView基于浏览器内核支持近乎完整的CSS，而原生渲染引擎（如uni-app的nvue）则通过有限的样式映射表将CSS转换为原生控件指令。这种差异化的技术价值在于平衡开发效率与运行时性能，使开发者能在同一代码库中兼顾Web的灵活性与原生的流畅体验。在实际应用场景中，当项目升级或迁移到nvue页面时，常会遇到如box-shadow、复合背景属性等CSS特性不被支持的问题

weixin_30824479的博客 378

css backdrop-filter和border-radius的坑

backdrop-filter是css中毛玻璃效果的属性，但是当他和position：fixed一起使用的时候，会改变css固定定位的相对位置点，固定定位原本是相对于浏览器左上角0,0border-radius和transform-translate使用的时候很离谱，要保证宽高为偶数而且不能为百分比，否则会导致字体渲染模糊

weixin_45727272的博客 1474

微信小程序音乐播放器开发：从架构设计到性能优化的完整实践

在移动应用开发领域，前端状态管理与多媒体处理是构建复杂交互应用的核心技术。其原理在于通过合理的架构设计，如单例模式和服务封装，来统一管理应用状态（如播放状态、用户数据），并利用事件驱动机制实现跨组件通信，从而确保数据流清晰、可维护性高。这项技术的价值在于能够显著提升应用的用户体验和代码质量，尤其适用于需要实时状态同步的场景，例如音乐播放、实时聊天等。在微信小程序生态中，结合其原生音频API和组件化系统，开发者可以高效地实现一个功能完整的音乐播放器。本文聚焦于如何利用事件总线和自定义组件，解决播放器状态同步和

weixin_30542979的博客 272

backdrop-filter

背景模糊效果等

weixin_48785875的博客 860

uniapp地图组件避坑实战：多端层级、坐标系与性能优化

跨端开发中，地图组件往往是最容易暴露平台差异的技术点。以uniapp map组件为例，它在微信小程序、App和H5端分别以原生组件、原生控件和JS SDK的形态渲染，这直接导致了层级遮挡、定位偏差和性能卡顿等系列问题。理解原生组件的渲染机制后，开发者就能用cover-view或subNVue解决弹窗被地图覆盖的难题，也能通过坐标系换算修复getLocation报错。而在大量标记点场景下，markers的更新策略与聚合方案则成为流畅体验的关键。本文从基础原理到工程实践，系统梳理了uniapp地图开发中的高频踩

weixin_34248487的博客 424

CSS-filter-Demo:微信小程序 CSS filter（滤镜）的使用示例

前言 之前在看七月老师的视频的时候，看到了有一个样式是-webkit-filter，不知道是什么，于是查了一下，原来是滤镜吖。但是在微信小程序里使用的时候，下面一直飘红线，再仔细查了一下，原来是在Chrome, Safari, Opera中使用 -webkit-filter，而微信小程序里使用的话，使用filter就可以了。一时间好奇了下，就多试了几个函数，以下是详细的笔记 定义 filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。 分类 none 默认值，没有效果。 blur() 高斯模糊 brightness() 亮度 contrast() 对比度 drop-shadow() 阴影 grayscale() 灰度 hue-rotate() 色相旋转 invert() 反色 opacity() 透明度 saturate() 饱和度 sepia() 复古色 ur

微信小程序开发uniapp+uview：实现毛玻璃效果

通过直接在CSS中使用filter来设置实现高斯模糊效果，其实filter是一种“假模糊”，因为需要一层做背景并且使用filter属性来达到模糊效果，另外一层（需要在背景层上面 ）设置一个半透明的背景色，二者结合使用，才能达到模糊效果。设置backdrop-filter : blur()属性，并且结合background : rgba()来实现按钮的高斯模糊效果。属性其实可以让开发者为一个元素后面区域添加图形效果，因为它适用于元素背后的所有元素，为了能够看到效果，必须使元素或者背景设置为部分透明。

Y_soon_start的博客 3259

css中filter属性和backdrop-filter的应用与区别详解

filter和backdrop-filter具有一定区别：

开发中小程序遇到的问题总结

搜索到的文章——如何实现快速生成朋友圈海报分享图Painter 一款轻量级的小程序海报生成组件Painter——github 地址。

hzg_hou的博客 1660

如何缩减layout电路面积？减少晶体管的数量——以全加器为例【VLSI】

How to reduce the number of transistors to reduce circuit area? -- Take the Binary Full Adder as an example 优化面积的方法 1. 减少晶体管的数量 2. 改变gate matrix的布局

Jie_MSD的博客 6433

宇树机器人G1二次开发：导览、起始点、目的地与完整示例

通过宇树G1 SDK的导航接口，开发者可以高效地实现机器人的自主移动功能。连接 -> 设置目标点 -> 发送命令 -> 监控状态。本文提供的完整示例涵盖了从环境搭建到代码实现的全部步骤，并解释了起始点、目的地等关键概念。开发者可以在此基础上，结合多目标点巡逻、动态避障（需高级配置）等功能，构建更复杂的机器人应用。建议读者先在小范围、熟悉的平坦环境中测试，成功后再逐步扩展到更复杂的场景。

m0_52645558的博客 747

微信小程序Swiper组件避坑指南：解决图片变形、卡顿、指示器不显示等5个常见问题

本文深度解析微信小程序Swiper组件开发中的五大常见问题，包括图片变形、滑动卡顿、指示器异常等，提供从图片自适应到性能调优的全方位解决方案。通过实战代码示例和性能优化建议，帮助开发者高效解决轮播图实现难题，提升用户体验和小程序专业度。

weixin_30458043的博客 364

DPARSF高级版 vs 基础版怎么选？没有T1数据也能做fMRI分析吗？

本文深度对比了DPARSF高级版与基础版在fMRI分析中的核心差异与适用场景，特别针对无T1数据的情况提供了实战解决方案。高级版依赖T1像实现高精度配准，适合需要精确解剖定位的研究；基础版则无需T1数据，适用于功能连接等相对空间要求不高的分析。文章还提供了版本选择决策树和常见问题解决方案，帮助研究者根据实际需求做出最优选择。

weixin_42526087的博客 132

别再复制粘贴了！微信小程序Swiper轮播图从入门到精通的5个实战技巧

本文深入解析微信小程序Swiper轮播图的5个高阶实战技巧，涵盖动态数据绑定、自定义指示器样式、图片懒加载、组件联动与性能调优。通过具体代码示例和优化方案，帮助开发者提升轮播图用户体验，适用于电商、内容展示等场景。掌握这些技巧可显著降低加载时间、减少卡顿率并增加用户停留时长。

weixin_30740581的博客 379

手把手教你学simulink（31.17）--双向DCDC电源场景示例：基于simulink 的双向DCDC应用:车载充电器的pi控制

通过引入PI控制器，系统可以更精确地控制电压和电流，确保充电和放电过程的稳定性和高效性。

MHD0815的博客 205

双像素传感器的AI计算摄影实战：单目深度估计与图像去模糊的融合创新

本文介绍了双像素传感器技术在计算机视觉中的应用，包括深度估计、图像去模糊和图像重建等任务。双像素传感器通过两个子单元捕捉视差信息，使摄像头能够分析场景的三维结构和运动轨迹。文章以图像去模糊为例，详细展示了从数据准备到模型训练的完整流程，包括构建自定义数据集、设计双像素特征提取模块、训练去模糊模型及推理测试。通过模拟双像素的"双视角"信息融合，该AI算法能有效恢复模糊图像的清晰细节。

know_F0727的博客 255

前端验证码验证实战指南：滑块、图片、点选与移动端验证完整实现

本文系统讲解前端验证码验证的常见方式与项目落地方案，涵盖图片数字验证码、数学计算验证码、滑块验证、移动端手势验证、图片点选验证和无感验证等类型。内容从验证码的安全作用、前后端交互流程、接口设计、Token 与 Ticket 校验机制讲起，并结合 JavaScript、Vue、React 前端代码，以及 Java Spring Boot、PHP 后端实现示例，帮助开发者理解验证码如何防刷、防爆破、防恶意提交。同时整理常用组件、第三方验证码服务和实战注意事项，适合前端开发、全栈开发和后台系统安全加固参考。

zzwokstyle的博客 898

BME688传感器原理图设计，已量产（环境传感器）

在便携式空气质量监测、可穿戴健康设备这类低功耗场景中，BME688 这类集成了 VOC、温湿度、气压的四合一 MEMS 传感器越来越受欢迎 —— 它体积小、功耗低，刚好匹配便携设备的需求。但这类小信号传感器对电源噪声、电平匹配的要求很细，今天结合实际项目里的一款 BME688 接口电路，聊聊硬件设计的关键细节。

不脱发的程序猿 514

微信小程序-慕尚花坊项目

文章摘要 本文全面介绍了微信小程序开发中的核心技术和实用技巧，主要包括以下内容： 自定义组件开发：详细讲解组件创建、注册、properties属性、内部data和方法的使用，包括父子组件通信和事件触发机制。 Flex布局：重点解析flex-direction:row-reverse的用法和实际应用场景，如按钮图标位置反转等。 组件样式修改：提供三种修改Vant组件样式的方法（解除隔离、外部样式类、CSS变量）及各自适用场景。 分包加载：介绍基础分包配置、独立分包、预下载规则及常见问题解决方案。 小程序开放能

2501_93485775的博客 221

计算机组成原理（第三版）唐朔飞-第七章指令系统-课后习题

机器字长是指CPU一次能处理数据的位数通常与CPU的寄存器位数有关。指令字长是指机器指令中二进制代码的总位数。存储字长是指存储单元中存放二进制代码的总位数。三者可以相等也可以不等视不同机器而定。答：OP(4位)A1(6位)A_1(6位)A1​(6位)A2(6位)A_2(6位)A2​(6位)设二地址指令格式为该指令系统的基本格式，4位操作码共有16种编码，其中13种用来定义二地址指令，还剩3种可用作扩展标志。一地址指令条数=3∗26=192。

weixin_45735391的博客 7万+

【Conda虚拟环境】新建 + 激活 + 安装 + 查看 + 退出 + 删除 + 复制 + 导出 + 导入 + 更改

（1）创建虚拟环境（2）激活虚拟环境（4）查看虚拟环境（3）退出虚拟环境（5）删除虚拟环境（6）复制虚拟环境（7）导出虚拟环境（8）导入虚拟环境（9）更改虚拟环境的安装路径（10）在指定路径下，配置虚拟环境

📷 图像处理践行者 | 传统算法 · 深度学习 · 多模态 | 分享实战经验与技术洞见，探索从像素到智能的无限可能。 4万+

MPX增强型小程序框架：多端适配与跨平台编译实战

小程序开发中，多端适配一直是团队绕不开的工程难题。面对微信、支付宝、抖音等平台差异，开发者既希望保留原生语法熟悉度，又追求一套代码多端复用。跨端框架应运而生，其核心原理是通过编译时转换与运行时增强，抹平平台API与模板能力的鸿沟。这类方案不仅降低迁移成本，还能显著提升前端团队的交付效率。在实际项目中，响应式数据绑定、模板指令、跨平台请求封装等能力，让业务逻辑更聚焦，减少重复劳动。本文以MPX这一增强型小程序框架为例，剖析其设计理念、语法特性与工程实践，结合任务清单案例，帮助开发者快速掌握多端开发的关键技能。

weixin_34408624的博客 313

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox（带书签），MATLAB统计学习工具

移动软件开发_实验3：高校新闻网

本实验属中国海洋大学26夏《移动软件开发》课程，实验3为高校新闻网。仓库地址：https://github.com/shen5920/Mobile-Software-Development/tree/main。从零构建新闻小程序，含首页、详情页、个人中心，实现分类、搜索、排序、时间筛选、

natiedog的博客 326

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用，资源的后缀为tar.gz格式的压缩包

VC中sqlite的使用

在VC中对sqlite的使用，实现数据库大批数据的快速插入，读取数据库中的数据在ListCtrl中显示

JAVA-WEB

文章目录1. JAVA-WEB介绍2. HTML3. CSS样式4. JavaScript5. Vue.js6. xml解析7. Tomcat服务器8. http协议9. Servlet10. Thymeleaf11. Cookie与Session12. Ajax13. Filter14. 监听器15. WEB组件注解用法16. 事务控制 1. JAVA-WEB介绍 2. HTML 3. CSS样式 4. JavaScript 5. Vue.js 6. xml解析 7. Tomcat服务器 8. http协

weixin_58005665的博客 1060

深入理解div与CSS：从盒模型到flex/grid布局实战

div是HTML中最基础的块级容器，其本质是服从文档流的空元素，视觉表现完全依赖CSS控制。理解CSS的核心逻辑——层叠（特异性优先级）、继承（文本属性可传、盒模型不可传）和标准盒模型（content-box与border-box差异），是解决布局失效问题的关键。现代前端开发中，flex用于一维弹性布局，grid专精二维网格划分，二者共同替代了已淘汰但需理解的float布局。结合transition动画、响应式媒体查询及可访问性适配，div可实现高性能、语义清晰、跨设备一致的交互动态效果。

weixin_34014555的博客 360

用HTML/CSS/JS打造七夕专属互动网页，附完整代码与部署教程

前端开发不仅是构建网页的基础，更是将创意快速落地为互动体验的重要技能。通过掌握HTML结构、CSS样式与JavaScript交互这三项核心技术，开发者能够在极低成本下实现自定义动画效果与个性化内容生成。这种无需依赖重型框架的静态页面方案，天然具备部署简单、跨平台兼容的优势，结合GitHub Pages即可免费发布上线。在实际应用中，无论是个人品牌展示、节日互动，还是轻量级数据收集，都能借助这类技术快速实现。本文以七夕主题网页为例，从零开始搭建一个包含星空动画与祝福语生成的完整项目，并提供Flask后端扩展方

dengjuanshou7445的博客 282
上一篇： 微信小程序缓存（本地缓存，同步缓存，异步缓存）
下一篇： 微信小程序canvas在其他图片上画圆形图片
点赞 0
评论 0
书签 书签 0
奋斗中的橘子
奋斗中的橘子
博客等级 码龄9年 1粉丝 11原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值