重磅来袭，微信小程序开发是否遇到难题？--细边框,细边框

如果你问我现在做微信小程序开发还有没有机会的话，我可以明确的告诉你，有的，绝对有的，还有很多Bug没解决。

随着项目功能开发的逐渐增加，遇到的问题也逐渐增加，今天咱不说三国(好像跟三国也没多大关系)，就说下细边框问题。

如果你不是追求完美的程序员，请绕路，无须往下看，如果是，你仔细比较一下左右两张图中的分割线有什么不同？--没错，小程序官方组件展示中的分割线(边框)要比微信的粗很多，就算是闭着眼睛也是能看出来的。

为了解决以上问题，我可是费了九牛二虎之力的，倒不是说实现有多难，而是网上找不到完美的答案。可能是我笨的原因，用搜索搜到的广告竟然比答案要多得多。

好了，我就不卖关子了，直接上程序员最喜欢的内容，千万不要误会，我说的不是美女图，而是源代码来的。

微信样式表文件Index.wxss中的源代码如下：

Page {

 background-color: #ededed;

}

.outer {

 display: flex;

 flex-direction: column;

 background-color: #fff;

 margin-top: 50px;

 padding-left: 16px;

 color: #353535;

 height: 140px;

}

.inner {

 display: flex;

 flex-direction: row;

 flex-wrap: nowrap;

 align-items: center;

 height: 46px;

}

.line {

 position: relative;

 width: 100%;

}

.line:after {

 content: " ";

 position: absolute;

 left: 0;

 right: 0;

 height: 1px;

}

.line:after {

 box-sizing: border-box;

 transform: scaleY(0.5);

 transform-origin: 0 0;

 top: 0;

 border-top: 1px solid rgba(0, 0, 0, 0.2);

}

微信标记语言文件index.wxml中的文件内容如下：

<view class="outer">

 <view class="inner">中间油条分割线,你看得见么?</view>

 <view class="line" />

 <view class="inner">如果看不见，那就用放大镜瞧.</view>

 <view class="line" />

 <view class="inner">没有放大镜的话，就用显微镜.</view>

</view>

<view class="outer">

 <view class="inner">中间油条分割线,你看得见么?</view>

 <view class="line" />

 <view class="inner">如果看不见，那就用放大镜瞧.</view>

 <view class="line" />

 <view class="inner">没有放大镜的话，就用显微镜.</view>

</view>

改进后的效果给你look 一 look。如果有时间的话，可以下载小程序官方组件展示的源代码，你会发现weui.wxss中，是没有对边框进行处理的，把我上面的代码补充到weui.wxss里面去就好了。记得除了after，还得有before哦。