欢迎光临
我们一直在努力

微信小程序——分割线中间带文字效果

微信小程序:分割线中间文字效果,这边直接贴代码和效果图,大家对号入座

.testClass{
  width:100%;
  margin-top: 100rpx;
  align-self: center;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.testClass:before{
  content:""; 
  margin-right: 20rpx;
  height:1px; 
  border: none;
  border-top:1px dashed #1E90FF;
  flex: 1 1 0rpx;
}
.testClass::after{
  content:""; 
  margin-left: 20rpx;
  height:1px; 
  border: none;
  border-top:1px dashed #1E90FF;
  flex: 1 1 0rpx;
}


.testClass1{
  width:100%;
  margin-top: 100rpx;
  align-self: center;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.testClass1:before{
  content:""; 
  margin-right: 20rpx;
  height:1px; 
  border: none;
  border-top:1px solid #000;
  flex: 1 1 0rpx;
}
.testClass1::after{
  content:""; 
  margin-left: 20rpx;
  height:1px; 
  border: none;
  border-top:1px solid #000;
  flex: 1 1 0rpx;
}



.testClass2{
  width:100%;
  margin-top: 100rpx;
  align-self: center;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.testClass2:before{
  content:""; 
  margin-right: 20rpx;
  height:1px; 
  border: none;
  border-top:3px double #6B8E23;
  flex: 1 1 0rpx;
}
.testClass2::after{
  content:""; 
  margin-left: 20rpx;
  height:1px; 
  border: none;
  border-top:3px double #6B8E23;
  flex: 1 1 0rpx;
}




.testClass3{
  width:100%;
  margin-top: 100rpx;
  align-self: center;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.testClass3:before{
  content:""; 
  margin-right: 20rpx;
  height:1px; 
  border: none;
  border-top:5px ridge #45D6D8;
  flex: 1 1 0rpx;
}
.testClass3::after{
  content:""; 
  margin-left: 20rpx;
  height: 1px;
  border: none;
  border-top:5px ridge #45D6D8;
  flex: 1 1 0rpx;
}

.testClass4{
  width:100%;
  margin-top: 100rpx;
  align-self: center;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.testClass4:before{
  content:""; 
  margin-right: 20rpx;
  height: 1px;
  border: none;
  border-top:10px groove #FF8C00;
  flex: 1 1 0rpx;
}
.testClass4::after{
  content:""; 
  margin-left: 20rpx;
  height: 1px;
  border: none;
  border-top:10px groove #FF8C00;
  flex: 1 1 0rpx;
}

.testClass5{
  width:100%;
  margin-top: 100rpx;
  align-self: center;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.testClass5:before{
  content:""; 
  margin-right: 20rpx;
  height: 1px;
  border: none;
  border-top:10px dotted #FF8C00;
  flex: 1 1 0rpx;
}
.testClass5::after{
  content:""; 
  margin-left: 20rpx;
  height: 1px;
  border: none;
  border-top:10px dotted #FF8C00;
  flex: 1 1 0rpx;
}

赞(0) 打赏
未经允许不得转载:半醉人间 » 微信小程序——分割线中间带文字效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏