渐变用法

边框渐变

比如左边框向两端渐变

border-left:1px transparent solid;
border-image:linear-gradient(#285474,#a2bac9,#285474) 1;

边框渐变.png

文字渐变

比如文字向两端渐变，中间小一点的字是上渐变到下

background: -webkit-linear-gradient(#680000, #fd4445, #680000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
//小一点的字渐变
background-image: -webkit-linear-gradient(#fd4445 40%,#680000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

文字渐变.png

文字换行

1 word-break:break-all

允许在单词内换行。给定div宽，字符超过指定宽度就会自动换行。如果该行末端有个英文单词很长（confidence等），它会把单词截断，变成该行末端为con(confidence的前半部分)，下一行为fidence（fidence的后端部分）。

2 word-wrap:break-word

允许长单词换行到下一行。例子与上面一样，但区别就是它会把confidence整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，不会截断单词