CSS样式简单汇总

::-webkit-scrollbar { 
    width: 0; 
    height: 0; 
    color: transparent; 
}

• 解决h5页面在ios端点击高亮闪烁

.className { 
    -webkit-tap-highlight-color:transparent; 
}

• 属性控制元素在移动设备上是否使用滚动回弹效果 auto: 无回弹效果; touch : 有回弹效果

.className {
    -webkit-overflow-scrolling: touch; 
}

• 文本一行展示，溢出显示...
  

.className { 
    display: -webkit-box; 
    word-wrap: break-word; 
    word-break: break-all; 
    text-overflow: ellipsis; 
    -webkit-line-clamp: 1; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
}

• 文本两行展示，溢出显示...
  

.className { 
    display: -webkit-box; 
    word-wrap: break-word; 
    word-break: break-all; 
    text-overflow: ellipsis; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
}

• 文本两行展示，溢出显示...
  

.className { 
    display: -webkit-box; 
    word-wrap: break-word; 
    word-break: break-all; 
    text-overflow: ellipsis; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
}

• 微信小程序轮播指示点样式 
  

swiper .wx-swiper-dots.wx-swiper-dots-horizontal { 
    margin-bottom: -5rpx; 
}
.head-ad swiper .wx-swiper-dots.wx-swiper-dots-horizontal { 
    margin-bottom: -5rpx; 
}swiper .wx-swiper-dot { 
    display: inline-flex; 
    justify-content: space-between; 
    float: left; width: 8rpx; 
    height: 8rpx; border-radius: 8rpx; 
    background: #fff; 
    margin-left: -5rpx; 
}swiper .wx-swiper-dot::before { 
    content: ''; flex-grow: 1; border-radius: 8rpx; 
}swiper .wx-swiper-dot-active { 
    transition: all 0.3s cubic-bezier(0.3, 0.3, 0, 0); width: 16px; background: #fff; 
}swiper .wx-swiper-dot-active::before { 
    border-radius: 12rpx; 
}

• 1像素问题
  

.className { 
    height: 1px; transform: scaleY(0.5) 
}

• 阴影上划线

.up_line { 
    box-shadow: inset 0 1px 0 0 #EEE; 
}

• 阴影下划线
  

.down_line { 
    box-shadow: inset 0 -1px 0 0 #EEE; 
}