CSS篇，数字字母连串换行、颜色渐变、Div透明度、滚动条样式、超出省略号显示

数字字母连串换行

• word-break 属性规定自动换行的处理方法

word-break: normal;		/*使用浏览器默认的换行规则。*/
word-break: break-all;	/*允许在单词内换行。使用此方案，使字母及数字连串换行*/
word-break: keep-all;	
/*只能在半角空格或连字符处换行。使用此方案，只有在内容内包含空格或者特殊符号才会换行*/

颜色渐变

• 上下

background: -webkit-linear-gradient(top,#ffffff,#f5f5f5);
background: -moz-linear-gradient(top,#ffffff,#f5f5f5);
background: -webkit-gradient(linear, top, bottom,from(#ffffff),to(#f5f5f5));
background: linear-gradient(top,#ffffff,#f5f5f5);
background: -ms-linear-gradient(top,#ffffff,#f5f5f5);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffffff, endColorstr=#f5f5f5);

• 左右

background: -webkit-linear-gradient(left,#41caf4,#5399f6);
background: -moz-linear-gradient(left,#41caf4,#5399f6);
background: -webkit-gradient(linear,left top,right top,from(#41caf4),to(#5399f6));
background: linear-gradient(left,#41caf4,#5399f6);
background: -ms-linear-gradient(left,#41caf4,#5399f6);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#41caf4, endColorstr=#5399f6);

透明度

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); /*IE6~IE8*/
filter:alpha(opacity=40); 
opacity:0.4;

滚动条样式

// 滚动条宽度
*::-webkit-scrollbar{width:6px;height:9px;border-radius:10px;}
// 鼠标移过背景
*::-webkit-scrollbar:hover{background-color:#082040;background-color: transparent;}
// 滚动条颜色
*::-webkit-scrollbar-thumb:vertical:hover{background-color:#108de2;display: block;}
*::-webkit-scrollbar-button:start:decrement,
*::-webkit-scrollbar-button:end:increment{display:block;height:0;background-color:transparent;}
// 滚动条移过颜色
*::-webkit-scrollbar-thumb:vertical{height:50px;background-color:#108de2;border-radius:10px;}

超出省略号显示

• 超出两行

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

• 超出一行

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;