1./*两端对齐 若单行,至少要3个字符,只有两个字符的,中间补一个空格*/ .text_justify { text-align: justify; text-justify: distribute-all-lines;/*ie6-8*/ text-align-last: justify;/* ie9*/ -moz-text-align-last: justify;/*ff*/ -webkit-text-align-last: justify;/*chrome 20+*/ } @media screen and (-webkit-min-device-pixel-ratio:0) {/* chrome*/ .aaa:after { content: "."; display: inline-block; width: 100%; overflow: hidden; height: 0; } }
2./*滚动条*/ #nicescroll1{overflow-y:auto;overflow-x:hidden;height:580px; scrollbar-arrow-color:#302D30; /*三角箭头的颜色*/ scrollbar-face-color:#000; /*立体滚动条的颜色(包括箭头部分的背景色)*/ scrollbar-3dlight-color:#302D30; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color:#302D30; /*滚动条的高亮颜色(左阴影?)*/ scrollbar-shadow-color:#302D30; /*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color:#302D30; /*立体滚动条外阴影的颜色*/ scrollbar-track-color:#302D30; /*立体滚动条背景颜色*/ scrollbar-base-color:#302D30; /*滚动条的基色*/} #nicescroll2{overflow-y:auto;overflow-x:hidden;height:396px; scrollbar-arrow-color:#302D30; /*三角箭头的颜色*/ scrollbar-face-color:#000; /*立体滚动条的颜色(包括箭头部分的背景色)*/ scrollbar-3dlight-color:#302D30; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color:#302D30; /*滚动条的高亮颜色(左阴影?)*/ scrollbar-shadow-color:#302D30; /*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color:#302D30; /*立体滚动条外阴影的颜色*/ scrollbar-track-color:#302D30; /*立体滚动条背景颜色*/ scrollbar-base-color:#302D30; /*滚动条的基色*/} #commend_list{overflow-y:auto;overflow-x:hidden;height:229px; scrollbar-arrow-color:#f8f9fb; /*三角箭头的颜色*/ scrollbar-face-color:#000; /*立体滚动条的颜色(包括箭头部分的背景色)*/ scrollbar-3dlight-color:#302D30; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color:#302D30; /*滚动条的高亮颜色(左阴影?)*/ scrollbar-shadow-color:#302D30; /*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color:#302D30; /*立体滚动条外阴影的颜色*/ scrollbar-track-color:#f8f9fb; /*立体滚动条背景颜色*/ scrollbar-base-color:#302D30; /*滚动条的基色*/} 3./*chrome滚动条*/ ::-webkit-scrollbar-track-piece{ -webkit-border-radius:0; } ::-webkit-scrollbar{ width:8px; height:8px; } ::-webkit-scrollbar-thumb{ height:50px; background-color:#000; -webkit-border-radius:4px; outline-offset:-2px; border: 2px solid #000; } ::-webkit-scrollbar-thumb:hover{ height:50px; background-color:#000; -webkit-border-radius:4px;/*两端对齐 若单行,至少要3个字符,只有两个字符的,中间补一个空格*/ .text_justify { text-align: justify; text-justify: distribute-all-lines;/*ie6-8*/ text-align-last: justify;/* ie9*/ -moz-text-align-last: justify;/*ff*/ -webkit-text-align-last: justify;/*chrome 20+*/ } @media screen and (-webkit-min-device-pixel-ratio:0) {/* chrome*/ .aaa:after { content: "."; display: inline-block; width: 100%; overflow: hidden; height: 0; } }
4./* 实现背景固定的效果 */ .背景图相对于元素固定{ background-attachment: fixed; width: 100%; height: 300px; background: url(https://s.w.org/images/home/collage-min.jpg?3) center top; background-size: cover; box-shadow: inset 0 0 8px rgba(0,0,0,.4); height: 600px; background-attachment: fixed; }
做过移动端需求的前端肯定是避免不了处理 1px
细线问题,这个问题的原因就是 UI 对页面美观度的要求越来越高(不要和我说这是 retina 屏的问题)。
据小生所知好像没有什么兼容性特别好的方案,这里我只是提供两种种相对较好的方案。
.border_bottom {
overflow: hidden;
position: relative;
border: none!important;
}
.border_bottom:after {
content: ".";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #d4d6d7;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.border_bottom {
box-shadow: inset 0px -1px 1px -1px #d4d6d
About the author