2023年6月20日发(作者：)

⼩程序笔记（三）（常⽤CSS样式）1. margin外边距 padding内边距 顺序上、右、下、左上、右左、下上下、右左2. ⼀⾏⽂本超出…//宽度固定.single { width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all;}3. 多⾏⽂本超出显⽰…//宽度不固定.more { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; work-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; //指定⾏数 line-clamp: 2;}4. IOS ⼿机容器滚动条滑动不流畅overflow: auto;-webkit-overflow-scrolling: touch;5. 隐藏滚动条样式::-webkit-scrollbar { width: 0; height: 0; color: transparent;}::-webkit-scrollbar { display: none;}6. CSS居中⽅法总结css垂直居中 参考：css⽔平居中 参考：css⽔平垂直居中 参考：7. 卡券样式效果.coupon { width: 300px; height: 100px; line-height: 100px; margin: 50px auto; text-align: center; position: relative; background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat, radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat, radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat, radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));}.coupon span { display: inline-block; vertical-align: middle; margin-right: 10px; color: red; font-size: 50px; font-weight: 400;}

200优惠券

8. 右上⾓审核状态标签 已驳回 .stateView { position: absolute; right: 0rpx; top: 0rpx;}.triangle-refuse { width: 0; height: 0; border-top: 100rpx solid red; border-left: 100rpx solid transparent;}.stateTxt { width: max-content; color: #ffffff; transform: rotate(45deg) translateY(-80rpx) translateX(-40rpx);}9. ⽂字模糊效果.text{ color: transparent; text-shadow: #111 0 0 5px;}10. ⽑玻璃效果.blur { display: block; width: 300px; height: 300px; margin: 100px auto; filter: blur(10px);}11. 多重边框重复指定box-shadow实现多重边框效果div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2); height: 200px; margin: 50px auto; width: 400px}12. 虚线框绘制.dotted-line { width: 400px; margin: auto; padding: 20px; border: 2px dashed transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, #ccc .25em, white 0, white .75em);}直接border属性dashed效果13. 隐藏⽂本的常⽤两种⽅法text-indent: -9999px; 或者 font-size: 0;14. IOS清除输⼊框内阴影input { -webkit-appearance: none;}15. 设置输⼊框placeholder默认字体颜⾊input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { color: #c7c7c7;}input:-moz-placeholder,textarea:-moz-placeholder { color: #c7c7c7;}input:-ms-input-placeholder,textarea:-ms-input-placeholder { color: #c7c7c7;}16. 将图⽚设置为边框使⽤ border-image 将下图设置为边框.box { border: 10px solid transparent; padding: 15px; border-image: url('/mmbiz_png/5Xv0xlEBe98mbr6Uwf3N0ich1zbZRRgBL9aA5CxDicr0ViabEt5j6DUbUSm1vqawmpibJyGTUaZUtuS5tzxRThJ2fA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1') 20% round;}

2023年6月20日发(作者：)

⼩程序笔记（三）（常⽤CSS样式）1. margin外边距 padding内边距 顺序上、右、下、左上、右左、下上下、右左2. ⼀⾏⽂本超出…//宽度固定.single { width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all;}3. 多⾏⽂本超出显⽰…//宽度不固定.more { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; work-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; //指定⾏数 line-clamp: 2;}4. IOS ⼿机容器滚动条滑动不流畅overflow: auto;-webkit-overflow-scrolling: touch;5. 隐藏滚动条样式::-webkit-scrollbar { width: 0; height: 0; color: transparent;}::-webkit-scrollbar { display: none;}6. CSS居中⽅法总结css垂直居中 参考：css⽔平居中 参考：css⽔平垂直居中 参考：7. 卡券样式效果.coupon { width: 300px; height: 100px; line-height: 100px; margin: 50px auto; text-align: center; position: relative; background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat, radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat, radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat, radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));}.coupon span { display: inline-block; vertical-align: middle; margin-right: 10px; color: red; font-size: 50px; font-weight: 400;}

200优惠券

8. 右上⾓审核状态标签 已驳回 .stateView { position: absolute; right: 0rpx; top: 0rpx;}.triangle-refuse { width: 0; height: 0; border-top: 100rpx solid red; border-left: 100rpx solid transparent;}.stateTxt { width: max-content; color: #ffffff; transform: rotate(45deg) translateY(-80rpx) translateX(-40rpx);}9. ⽂字模糊效果.text{ color: transparent; text-shadow: #111 0 0 5px;}10. ⽑玻璃效果.blur { display: block; width: 300px; height: 300px; margin: 100px auto; filter: blur(10px);}11. 多重边框重复指定box-shadow实现多重边框效果div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2); height: 200px; margin: 50px auto; width: 400px}12. 虚线框绘制.dotted-line { width: 400px; margin: auto; padding: 20px; border: 2px dashed transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, #ccc .25em, white 0, white .75em);}直接border属性dashed效果13. 隐藏⽂本的常⽤两种⽅法text-indent: -9999px; 或者 font-size: 0;14. IOS清除输⼊框内阴影input { -webkit-appearance: none;}15. 设置输⼊框placeholder默认字体颜⾊input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { color: #c7c7c7;}input:-moz-placeholder,textarea:-moz-placeholder { color: #c7c7c7;}input:-ms-input-placeholder,textarea:-ms-input-placeholder { color: #c7c7c7;}16. 将图⽚设置为边框使⽤ border-image 将下图设置为边框.box { border: 10px solid transparent; padding: 15px; border-image: url('/mmbiz_png/5Xv0xlEBe98mbr6Uwf3N0ich1zbZRRgBL9aA5CxDicr0ViabEt5j6DUbUSm1vqawmpibJyGTUaZUtuS5tzxRThJ2fA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1') 20% round;}