宽度自适应文字内容-滑动门
改变宽度对比滑动门
滑动门
1
123
123456
123456789
1
10
100
通过改变宽度进行适配
1
11
111
/* pages/f/f.wxss *//*撑开展示左边的圆角*/.tap {display: inline-block;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAAAhBAMAAAAi3mFzAAAAJ1BMVEUoJychICASEhIHBwdBQEA6OjozMzMYGBgtLS1hYWFPT09VVVVje2t90rgEAAABN0lEQVRYw9XWMUvDQBgG4PcKsep0X0HbMUmtWsf6Cwpx0KmBXih2iphTcGpAQsHBCNaODjpUpy4dOouLf84kFv/D+/Bx8/ty38HBlEbN1CeTtarkBuURes4wIGNy779A6NLFLw3cTYFIKPMHQTirCiS5c8YpgDUJErt5DYRGz1ECGzu0Bcx2ZGGFN78JbVHgkLhAdGIR71tiexGuZswFnlao387mvHPzDZkzy4eYPDLLd+GC2hSuptaFp7QQzxSeUHtARp2/uYPmJCOebIxGxixdo5YdpbyTvkP5zA5eAeoC3SXQYC5wDmjd5tV5U1C61qN1t1TQgvYpp97xOheIbr2wXsB4JeUNyJbPmb/zoZSCKKVNg3CL/PtFX1SxQqWLQZ3tE4HLRV9JsUJ/v7rrnwWZz6+4Sv4L/3WVTxhXFo4AAAAASUVORK5CYII=");background-repeat: no-repeat;height: 66rpx;padding-left: 30rpx;line-height: 66rpx;color: #fff;margin: 10rpx;
}/*撑开展示右边的圆角*/.item {display: inline-block;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAAAhBAMAAAAi3mFzAAAAJ1BMVEUoJychICASEhIHBwdBQEA6OjozMzMYGBgtLS1hYWFPT09VVVVje2t90rgEAAABN0lEQVRYw9XWMUvDQBgG4PcKsep0X0HbMUmtWsf6Cwpx0KmBXih2iphTcGpAQsHBCNaODjpUpy4dOouLf84kFv/D+/Bx8/ty38HBlEbN1CeTtarkBuURes4wIGNy779A6NLFLw3cTYFIKPMHQTirCiS5c8YpgDUJErt5DYRGz1ECGzu0Bcx2ZGGFN78JbVHgkLhAdGIR71tiexGuZswFnlao387mvHPzDZkzy4eYPDLLd+GC2hSuptaFp7QQzxSeUHtARp2/uYPmJCOebIxGxixdo5YdpbyTvkP5zA5eAeoC3SXQYC5wDmjd5tV5U1C61qN1t1TQgvYpp97xOheIbr2wXsB4JeUNyJbPmb/zoZSCKKVNg3CL/PtFX1SxQqWLQZ3tE4HLRV9JsUJ/v7rrnwWZz6+4Sv4L/3WVTxhXFo4AAAAASUVORK5CYII=");background-repeat: no-repeat;background-position: right;height: 66rpx;padding-right: 30rpx;line-height: 66rpx;
}/*撑开展示左边的圆角*/.tap-two {display: inline-block;box-sizing: border-box;/* background: #00f; */background: #f00;height: 60rpx;line-height: 60rpx;padding-left: 20rpx;font-size: 26rpx;color: #fff;margin: 10rpx;border-radius: 50%;}/*撑开展示右边的圆角*/.item-two {display: inline-block;box-sizing: border-box;background: #f00;height: 60rpx;line-height: 60rpx;padding-right: 20rpx;border-radius: 50%;
}.bottom-container{position: relative;/* display: flex; */width: 100%;border: 1rpx solid #0f0;
}.bottom-bage {/* position: absolute; */display: inline-block;top: 0rpx;left: 58rpx;background-color: red;text-align: center;width: 34rpx;height: 34rpx;line-height: 34rpx;color: white;border:2rpx solid #FFFFFF;border-radius: 17rpx;font-size: 26rpx;}.two {width: 44rpx;
}.three {width: 54rpx;
}
滑动门
1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少， 出现了CSS滑动门技术。
1.2 使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的 文本内容，可用性更强。
1.3 最常见于各种导航栏的滑动门。
小程序版：
滑动门
特殊形状的背景能够自适应元素中文本内容的多少
使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强
1
123
123456
123456789
样式
/* pages/f/f.wxss */
/*撑开展示左边的圆角*/
.tap {display: inline-block;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAAAhBAMAAAAi3mFzAAAAJ1BMVEUoJychICASEhIHBwdBQEA6OjozMzMYGBgtLS1hYWFPT09VVVVje2t90rgEAAABN0lEQVRYw9XWMUvDQBgG4PcKsep0X0HbMUmtWsf6Cwpx0KmBXih2iphTcGpAQsHBCNaODjpUpy4dOouLf84kFv/D+/Bx8/ty38HBlEbN1CeTtarkBuURes4wIGNy779A6NLFLw3cTYFIKPMHQTirCiS5c8YpgDUJErt5DYRGz1ECGzu0Bcx2ZGGFN78JbVHgkLhAdGIR71tiexGuZswFnlao387mvHPzDZkzy4eYPDLLd+GC2hSuptaFp7QQzxSeUHtARp2/uYPmJCOebIxGxixdo5YdpbyTvkP5zA5eAeoC3SXQYC5wDmjd5tV5U1C61qN1t1TQgvYpp97xOheIbr2wXsB4JeUNyJbPmb/zoZSCKKVNg3CL/PtFX1SxQqWLQZ3tE4HLRV9JsUJ/v7rrnwWZz6+4Sv4L/3WVTxhXFo4AAAAASUVORK5CYII=");background-repeat: no-repeat;height: 66rpx;padding-left: 30rpx;line-height: 66rpx;color: #fff;margin: 10rpx;
}
/*撑开展示右边的圆角*/
.item {display: inline-block;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAAAhBAMAAAAi3mFzAAAAJ1BMVEUoJychICASEhIHBwdBQEA6OjozMzMYGBgtLS1hYWFPT09VVVVje2t90rgEAAABN0lEQVRYw9XWMUvDQBgG4PcKsep0X0HbMUmtWsf6Cwpx0KmBXih2iphTcGpAQsHBCNaODjpUpy4dOouLf84kFv/D+/Bx8/ty38HBlEbN1CeTtarkBuURes4wIGNy779A6NLFLw3cTYFIKPMHQTirCiS5c8YpgDUJErt5DYRGz1ECGzu0Bcx2ZGGFN78JbVHgkLhAdGIR71tiexGuZswFnlao387mvHPzDZkzy4eYPDLLd+GC2hSuptaFp7QQzxSeUHtARp2/uYPmJCOebIxGxixdo5YdpbyTvkP5zA5eAeoC3SXQYC5wDmjd5tV5U1C61qN1t1TQgvYpp97xOheIbr2wXsB4JeUNyJbPmb/zoZSCKKVNg3CL/PtFX1SxQqWLQZ3tE4HLRV9JsUJ/v7rrnwWZz6+4Sv4L/3WVTxhXFo4AAAAASUVORK5CYII=");background-repeat: no-repeat;background-position: right;height: 66rpx;padding-right: 30rpx;line-height: 66rpx;
}
。。。
h5版
滑动门
首页开发平台北京尚学堂
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！