微信小程序重叠的border变宽

原创 已于 2022-09-30 21:45:45 修改 · 705 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #小程序 #前端

于 2022-09-30 21:45:30 首次发布
本文介绍了如何使用CSS解决微信小程序中相邻盒子边框重叠导致看起来边框变粗的问题。通过为第一个和第二个盒子设置负margin，使得边框能够重叠，从而消除视觉上的加粗效果。具体解决方案包括设置border-width和负margin，例如：border-width:3rpx; margin-top:-1rpx。

微信小程序重叠的border变宽

css解决盒子竖直排列边框叠加变粗的问题

在这里插入图片描述

解决：
对第一个和第二个盒子都添加margin-left:-mpx;(m表示边框的大小)，这样两个边框就重叠在了一起，就不会看起来有加粗的效果了。

border-width: 3rpx;
margin-top: -1rpx;

在这里插入图片描述
这样即可。

使用CSS调整边框宽度
WbhsOcaml的博客
10-02 755
当我们想要调整元素的边框宽度时，在CSS中有几种方法可以实现。在本文中，我将向您展示如何使用CSS来设置边框的宽度。然而，这些特殊值的确切宽度可能因浏览器而异，因此最好使用具体的像素或百分比值来确保一致的效果。该属性可以接受一个值，也可以接受多个值来分别设置上、右、下和左边框的宽度。值可以是一个固定的像素值，也可以是相对于父元素的百分比值。属性设置了边框的宽度为2像素，样式为实线，颜色为红色。属性，您可以轻松地设置元素的边框宽度，并为网页设计带来更多的可能性。属性来同时设置边框的宽度、样式和颜色。
【白嫖党】如何把前端学好？看完这篇，直呼：太强了！（历经半个月之作）
超逸の学习技术博客
04-04 2万+
很少有文章做到将知识形成一个体系，于是需要翻阅很多资料，但这篇文章做到了！共34815字数。
CSS布局基础（十二）（紧邻盒子边框叠加变粗问题 && 文字环绕图片 && CSS初始化）
冰糖的博客
05-14 1066
不同浏览器 对标签的默认值可能不一致，因此，在实际开发中，需要对默认样式进行统一设置。float （浮动）效果原本就是为了实现文字环绕图片而创建的规范；只是正好可以用来布局。此时可以根据相应的排列方向，使用 合适的 margin 负值实现。的盒子，如果此时都有边框的话，就会出现，边框变粗的情况，
微信小程序——如何处理课表信息部分的重叠问题（实战）
wct040923的博客
03-29 1287
在很多学校会存在供学生查看课表的小程序软件，但是由于不同周的同一个时间会出现不同的课，从而导致会出现堆叠的情况，甚至会出现后面的课程把前面的课程给完全覆盖的情况，从而导致页面十分不美观，而且会致使一些被覆盖的课程没办法看到，这个时候可以采用堆叠的方式，让有重叠的课程出现一个与其他不重叠的课程不一样的样式，点击卡片的时候出现多节课程信息，这样可以使整体页面美观，而且功能效果会更好！
小程序系列之3框架（view&border）
实干兴邦
04-19 1万+
                                               小程序框架第一：框架简介       小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。       框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以...
微信小程序css篇----边框(Border)
热门推荐
鎏嫣宫守护的博客
12-30 21万+
一.边框：border 设置对象边框的特性。 1.语法：border：length   style  color  2.style：none ，hidden，dotted，dashed，solid，double，groove，ridge，inset，outset。    二.相关属性。 1.border-width：设置边框宽度：常用取值：medium：默认值，相当于3px。thin
微信小程序知识点总结
kelepaopao_的博客
05-31 623
微信小程序知识点总结 4.12 小程序的页面结构： app 主体： app.json (小程序配置文件） | 特点：| 最后一项配置不要逗号，所有的配置标点符号为英文| | pages：| 哪个页面被配置，哪个页面就是首页要放到最前面| | window：| 窗口的配置| app.js (主业务逻辑） app.wxss (主样式css） pages 页面： index 首页 | index.js（首页的业务逻辑）| data:首页的数据 | | index.json（首页配置）| 覆盖app.json
微信小程序动态布局案例分析：View尺寸变化的12最佳实践
微信小程序作为移动应用开发的新兴平台，其动态布局技术对于提升用户体验和界面适应性至关重要。本文首先概述了动态布局在微信小程序中的基本概念及其重要性，随后深入探讨了视图尺寸变化的理论基础，包括其影响因素...
微信小程序CSS优化技巧：提升滚动效果的渲染性能
![微信小程序CSS优化技巧：提升滚动效果的渲染性能]...微信小程序作为当下流行的移动端应用开发平台，对于开发者而言，实现优雅而高效的CSS布局和渲
js实现简单的小球与边框碰撞反弹改变运动方向及颜色，并且继续运动的特效
YaWen的博客
02-27 1万+
js实现简单的小球与边框碰撞反弹改变运动方向及颜色，并且继续运动特效 思路：首先先实现一个小球的运动和撞边框反弹效果，并且改变其颜色 主要实现方法：1.小球定位，运动靠改变它的position上下左右值；2.获取浏览器的宽高，由此设置小球运动的最大范围，大于等于这个范围的时候就改变运动方向；3.颜色的改变采用rgb方法，rgb的三个数值均用Math.random随机生成；
边框重叠解决办法
蓝冰凌的博客
12-25 6589
1，table去重叠边框 table{ border-collapse:collapse; } 2，如果不是table标签，border-collapse属性就无法生效了，用下面方法： 设置边框的相反数，比如重叠边框为1PX, 则给重叠的div添加margin-right：-1px; margin-bottom:-1px.margin-top:-1px;margin-left:-1px...
iOS微信小程序border边框上下不显示的问题
ZerZhang的博客
03-28 2194
iOS微信小程序border边框上下不显示的问题
CSS：margin负值，解决边框线重合后变粗的问题
weixin_46682277的博客
12-20 1657
当在页面中创建多个盒子后，然后给每个盒子加上边框border，就会出现边框线重合后线变粗的问题，和表格table的边框线问题一样，但不能用解决table表格边框线的方法来解决盒子边框线的问题。 这时候其实只要一句代码就可以解决这个问题，给盒子加一个：margin-left：-1px；这样可以压住盒子相邻的边框，就不会出现重合变粗的问题了。 .nav li { float: left; width: 150px; height: 100px; margin-left: -1px;
CSS3之解决相邻border重合加粗问题
杨筱斌的博客
11-06 9815
解决这个问题的 方法 是 ： 在 该元素 上设置 相关方向 的 margin为-1px; 如果需要 伪类显示 的话，在 该元素的伪类 中加 相对定位，目的是将 被压住 的 border 显示出来 如果 还需要 在 此元素 上加 拥有绝对定位的其它元素，那么在 该元素 上加 相对定位，在 该元素的伪类 上加 z-index 属性   下面两个例子就是利用了这个方法！！！ 代码示例...
小程序块元素如何叠加问题
m0_51077750的博客
03-09 1995
小程序块元素如何进行叠加
详解 CSS 外边距重叠(外边距塌陷)问题及解决办法
m0_46862838的博客
09-30 8301
边距重叠这个问题之前遇到过，但是并没有太在意，最近多次遇到，就去查了一下。 边距重叠就像字面意思一样，两边距重叠到一起了。 官方一点解释就是： 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。 而造成外边距重叠有 三种情况： 第一种情况：发生在同一层相邻元素之间 ...
CSS3解决相邻border重合加粗问题
weixin_43550562的博客
06-26 1550
【代码】CSS3解决相邻border重合加粗问题。
微信小程序view中加边框，阴影，圆角，左半边圆角，内凹圆角反向圆角
wy313622821的博客
06-29 4万+
简介 本文适用于view，button等控件中加边框，效果图： 代码： .view{ border: 3rpx solid #faca82; border-radius: 10rpx; padding: 10rpx; }
CSS基础学习（盒子模型、display）（三）
qq_36802214的博客
07-03 560
盒子模型图 盒子代码学习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> .p1 { back.
实现微信小程序顶部栏渐变隐藏与吸顶效果
资源摘要信息:"微信小程序顶部栏图片随页面滚动渐变展示隐藏" 知识点一：微信小程序基础 微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值