微笑小程序 1px边框border

最新推荐文章于 2024-07-12 11:08:13 发布

原创最新推荐文章于 2024-07-12 11:08:13 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #小程序 #css3

小程序开发专栏收录该内容

6 篇文章

订阅专栏

像素基本概念： 参考这篇文章微信小程序----适配小结、移动端1px与选择器权重，里面已经很清楚的描述了像素单位及为什么会出现CSS写的1px，实际上看起来比1px粗。

直接上代码：

/* border 1px样式 */
.border_bottom, .border_top, .border_all {
  position: relative;
}

.border_top::after {
  position: absolute; 
  content: '';
  width: 100%;
  left: 0;
  top: 0;
  height: 1px;
  padding: 0 32rpx;
  box-sizing: border-box;
  background-color: #E6E6E6;
  -webkit-transform: scale(1, 0.5);
  transform: scale(1, 0.5);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.border_bottom::after {
  position: absolute; 
  content: '';
  width: 100%;
  left: 0;
  bottom: 0;
  height: 1px;
  padding: 0 32rpx;
  box-sizing: border-box;
  background-color: #E6E6E6;
  -webkit-transform: scale(1, 0.5);
  transform: scale(1, 0.5);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.border_all::before {
  content: '';
  display: block;
  position: absolute;
  width: 200%;
  height: 200%;
  border: 1px solid #d9d9d9;
  border-radius: 10rpx;
  transform-origin: 0 0;
  transform: scale(0.5, 0.5);  
  -webkit-transform: scale(0.5, 0.5);
  box-sizing: border-box;
}