邊框漸變

比如左邊框向兩端漸變

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

允許長單詞換行到下一行。例子與上面一樣，但區(qū)別就是它會把confidence整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，不會截斷單詞