慢慢,收集css代码块(持续更新……)

By柏小白

慢慢,收集css代码块(持续更新……)

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;
    }

 

5. 1px 方案

做过移动端需求的前端肯定是避免不了处理 1px 细线问题,这个问题的原因就是 UI 对页面美观度的要求越来越高(不要和我说这是 retina 屏的问题)。

据小生所知好像没有什么兼容性特别好的方案,这里我只是提供两种种相对较好的方案。

使用伪类 + transform

.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);
}

使用 box-shadow 模拟

.border_bottom {
  box-shadow: inset 0px -1px 1px -1px #d4d6d
 

About the author

柏小白 administrator

Leave a Reply