小程序--实现细线边框

效果图

首先尝试一下传统方式实现边框

</view>

</navigator>

</navigator>

</navigator>

</navigator>

</view>

wxss文件：

.slider image{

width: 100%;

height: 440rpx;

}

.index-nav{

display: flex;//弹性布局

flex-wrap: wrap;//放不下的放到下一行

}

.index-nav .nav-item{

width: 33.3%;

height: 200rpx;

border-right: 1rpx solid #ccc;

border-bottom: 1rpx solid #ccc;

display: flex; //flex布局为默认横向排列元素

box-sizing: border-box;

flex-direction: column;//设置flex布局纵向排列元素(从左到右为交叉轴，从上到下为主轴)

justify-content: center;//元素在主轴上的对齐方式

align-items: center;//元素在交叉轴上的对齐方式

}

.index-nav .nav-item :nth-child(3n){

border-right: 0 none;

}

.index-nav image{

width:80rpx ;

height: 80rpx;

}

如果没有 box-sizing: border-box;显示效果就会变成这样

实际上每一行是有点放不下的，因为这种方式的边框占据了实体位置

换一种方式，通过伪元素实现

.slider image{

width: 100%;

height: 440rpx;

}

.index-nav{

display: flex;

flex-wrap: wrap;

}

.index-nav .nav-item{

display: flex;

flex-direction: column;

width: 33.3333%;

height: 200rpx;

justify-content: center;

align-items: center;

box-sizing: border-box;

border-bottom: 1rpx solid #f00;

position: relative;

}

.index-nav .nav-item::after{

content: '';

width:1rpx;

height:100%;

position:absolute;

top:0rpx;

right:0rpx;

background-color:#f00;

}

.index-nav .nav-item:nth-child(3n)::after{

width: 0rpx;

}

.index-nav image{

width:80rpx ;

height: 80rpx;

}

由于分辨率太高（1920*1080），会出现一条边显示不出来的情况，用手机调试就可以看清楚效果了

小程序--实现细线边框相关推荐

小程序显示细线_精心设计：高密度显示器上的细线
小程序显示细线 Despite the many benefits of Retina displays, there is one clear drawback that must be cons ...
微信小程序之input 边框
微信小程序之input 边框文章目录微信小程序之input 边框一.边框:border 设置对象边框的特性. 二.相关属性一.边框:border 设置对象边框的特性. 语法:border:le ...
微信小程序: 设置 Button 边框 border
微信开发工具 v1.02.1802080 微信小程序自定义 Button 边框 border主要代码: .myButton{border: 1px solid #70bcf6; border-radi ...
小程序1rpx，边框不完整或线条太粗
在小程序中使用1rpx时,在边框可能会显示不全.用1px可以解决显示不全的问题,但是真机上线条太粗. 解决方法:利用 css 的伪元素::after + transfrom 进行缩放 .border ...
微信小程序 - 修改 button 边框和背景色
为什么80%的码农都做不了架构师?>>> 微信小程序开发中使用 button 设置禁用时候,按钮会有默认的背景色和边框,下面分享下修改按钮边框和背景色. wxml代码: < ...
微信小程序input组件边框不显示问题的解决方法
问题情景在微信小程序开发中经常用到input组件,但是如果按下面的wxml代码去写,input的边框是不会显示的,只有在鼠标点过去的时候才会有个光标 <view class="set ...
小程序中圆角边框的设置
与CSS一样,小程序中的圆角可以通过border-radius来设置. 以input为例,想要设置圆角边框,只需加上如下样式: border-radius: 5px 1 即可实现如下效果: 不 ...
小程序button去除边框
在小程序给官方button增加自定义样式的时候,需要注意隐藏button的border. 我用的less,加上一行代码就可以解决. &:after {border: none; } 例如下图自 ...
小程序实现圆点边框解决 dotted不兼容小程序圆点边框兼容问题如何在小程序实现兼容的圆点边框
先上效果图由于业务需要,需要做一排圆点,实现方法有很多,在此记录一下另一种实现方式. 最终效果: 效果前提由于仅仅做小程序,而且使用了weUI样式,其中有一个徽章badge,突然奇想用徽章badg ...

小程序--实现细线边框

小程序--实现细线边框相关推荐

最新文章

热门文章