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;