為了讓喜歡按F12的訪客不至于看到空空的控制臺(tái)，寫了點(diǎn)代碼充實(shí)了下內(nèi)容，也順便復(fù)習(xí)下這部分內(nèi)容。

console打印的文字是可以添加樣式的，不過不是全部css效果都有效，這里只介紹一小部分樣式。

\n是換行，可以將一個(gè)字符串設(shè)置成多行

%c標(biāo)記之后的內(nèi)容使用對(duì)應(yīng)樣式，格式如 console.log('%c第一個(gè)樣式%c第二個(gè)樣式','css1','css2'); 如此對(duì)應(yīng)

樣式和普通的css效果基本一致，可以設(shè)置文字顏色，背景顏色，字體大小，間距，邊距等等。還支持部分css3高級(jí)效果。

甚至還支持輸出圖片，不過我這里測(cè)試沒有出現(xiàn)效果。

以下是我自己寫的效果圖：

代碼如下：

console.log("%c%c博客名稱%c御坂網(wǎng)絡(luò)","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#3fa9f5;line-height:28px;font-size:16px;");

console.log("%c%c網(wǎng)站地址%chttp://www.neurallinker.com","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#ff9900;line-height:28px;font-size:16px;");

console.log("%c%c企鵝號(hào)碼%c1273727577","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#008000;line-height:28px;font-size:16px;");

console.log("%c%c任何足夠先進(jìn)的技術(shù)，初看皆與魔法無異！我一直覺得這句話很有道理，不知道你是不是也這樣認(rèn)為呢。","line-height:28px;","line-height:28px;padding:4px 0px;color:#fff;font-size:16px;background-image:-webkit-gradient(linear,left top,right top,color-stop(0,#ff22ff),color-stop(1,#5500ff));color:transparent;-webkit-background-clip:text;");