html+css开发中的小技巧总结

1、CSS控制文字，超出部分显示省略号2、

单行：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行：
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;
 overflow: hidden;   

2、背景色中间向两边渐变

background: linear-gradient(to right,
    rgba($color: #1c6f8b, $alpha: 0) 0%,
    rgba($color: #1c6f8b, $alpha: 0.2) 10%,
    rgba($color: #1c6f8b, $alpha: 0.4) 20%,
    rgba($color: #1c6f8b, $alpha: 0.6) 30%,
    rgba($color: #1c6f8b, $alpha: 0.8) 40%,
    rgba($color: #1c6f8b, $alpha: 1.0) 50%,
    rgba($color: #1c6f8b, $alpha: 0.8) 60%,
    rgba($color: #1c6f8b, $alpha: 0.6) 70%,
    rgba($color: #1c6f8b, $alpha: 0.4) 80%,
    rgba($color: #1c6f8b, $alpha: 0.2) 90%,
    rgba($color: #1c6f8b, $alpha: 0) 100%)
}

根据自己的情况设置百分比间隔

3、PC端点击l一块区域时会有一层蓝色，取消蓝色解决办法

css:
body {
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
} 
js:
document.ondragstart = document.onselectstart = function(){return false;};

4、鼠标阻止点击icon

cursor: not-allowed;

5、各个方向上的阴影设置

四周：  box-shadow: 0 0 10px #f00  
内部：  box-shadow: 0px 0px 10px red inset;
left：  box-shadow:-5px 0 10px -5px #00ff00;
bottom：box-shadow:0 5px 10px -5px #00ff00;
right： box-shadow:5px 0 10px -5px #00ff00;
top：   box-shadow:0px -5px 10px -5px #00ff00;
left-top：     box-shadow:-5px -5px 10px  -4px #00ff00;            
right-top：    box-shadow:5px -5px 10px -4px #00ff00;
left-bottom：  box-shadow:-5px 5px 10px -4px #00ff00;
right-bottom：box-shadow:5px 5px 10px -4px #00ff00;
no-left:（ /* .right-bottom,.right-top组合 */）
    box-shadow:5px 5px 10px -4px #00ff00,5px -5px 10px -4px  #00ff00;
no-bottom:(/* .left-top,.right-top组合 */)
    box-shadow:-5px -5px 10px  -4px #00ff00,5px -5px 10px -4px  #00ff00;
no-right:(/* .left-top，.left-bottom组合 */)
    box-shadow:-5px -5px 10px  -4px #00ff00,-5px 5px 10px -4px #00ff00;
no-top:(/* .left-bottom,,right-bottom组合 */)
    box-shadow:-5px 5px 10px -4px #00ff00,5px 5px 10px -4px #00ff00;