CSS 特殊样式设置集合

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

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

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

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

css代码如下：

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

overflow:hidden;

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的扩展半径。

6. position absolute 居中定位方法

方法一：（不能微调）

position:absolute;

left:0; right:0; top:0; bottom:0;

margin:auto;

方法二：（可微调）

position:absolute;

top:50%; left:50%;

margin-top:Xpx;

margin-left:Ypx;

7. 隐藏滚动条的宽度

.demo {　

　　scrollbar-width: none; /* firefox */

　　-ms-overflow-style: none; /* IE 10+ */

　　&::-webkit-scrollbar

　　display none

}

CSS 特殊样式设置集合

推荐阅读