CSS 特殊样式设置集合

1. 父窗口宽度不定，要求内部两个子块， 第一个子块宽度固定，第二个子块宽度自适应。

　　第一个子块宽度固定，定位为绝对定位 position:absolute;  第二个子块设置margin-left即可。

2. 如果内容太长，多余的部分用...代替

　　

.dingdan-longmsg{
　　　　display:block;
　　　　white-space:nowrap;
　　　　overflow:hidden;
　　　　text-overflow:ellipsis;
　　}

　　

3. 设置谷歌浏览器滚动条的样式

::-webkit-scrollbar{
    padding-left:1px;
    font-weight:bold;">#fafafa;
    overflow:visible;
    width:9px;
}
::-webkit-scrollbar-thumb{
    font-weight:bold;">rgba(0, 0, 0, .1);
    background-clip:padding-box;
    border-left-width:2px;
    min-height:10px;
    box-shadow:inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07);
}
::-webkit-scrollbar-thumb:vertical:hover{
    font-weight:bold;">rgba(0, 0, 0, .2);
}
::-webkit-scrollbar-thumb:vertical:active{
    font-weight:bold;">rgba(0, 0, 0, .2);
}
::-webkit-scrollbar-button{
    height:0;
    width:0;
}
::-webkit-scrollbar-track{
    background-clip:padding-box;
    border:solid transparent;
    border-width:0 0 0 2px;
}
::-webkit-scrollbar-corner{
    background:transparent;
}
::-webkit-scrollbar-track-piece{
    margin: 10px 0;
    -webkit-border-radius: 0;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
}

　　

4.ios 去除input框阴影

input{
    -webkit-appearance: none;
}

5. 单边阴影
　　

.top {
      box-shadow: 0 -4px 5px -3px red;
    }
    .right {
      box-shadow: 4px 0 5px -3px green;
    }
    .bottom {
      box-shadow: 0 4px 5px -3px blue;
    }
    .left {
      box-shadow: -4px 0 5px -3px orange;
    }

　　上面的代码调整了阴影的位移量，新增了box-shadow的扩展半径。