越努力越幸运。
不管如何,我比你努力,比你好,比你更问心无愧。

2017.02.22

教程 | 更换 Highlight 的颜色(2)


看回第一篇 更换 highlight 的颜色 你们就知道什么是 highlight 了。
那个是比较简单的 highlight 版,这个是晋级版的 XD


教程 ①:为 highlight 添加阴影(shadow)

如上,放大了效果有点乱,大家可以自己试试看说 :)

1. 设计 → 修改 HTML

2. Ctrl + F 寻找代码 ]]></b:skin>

3. 在 ]]></b:skin> 上面添加以下代码:

::-moz-selection {
background: #ffffff;
color: #faafbe;
text-shadow: 2px 2px 2px #cccccc;
}

::selection {
background: #ffffff;
color: #faafbe;
text-shadow: 2px 2px 2px #cccccc;
}
 4. 好了之后,按 preview 测试代码有没有问题,按 保存 即可。

小解释
红色代码:highlight 的背景色(可依据你的部落格背景色更改)
蓝色代码:highlight 时字体的颜色(可更改)
紫色代码:阴影(shadow)的颜色(可更改)


教程 ②:为 highlight 添加另一种包围的颜色

如上,放大了效果有点乱,大家可以自己试试看说 :)

1. 设计 → 修改 HTML

2. Ctrl + F 寻找代码 ]]></b:skin>

3. 在 ]]></b:skin> 上面添加以下代码:

::-moz-selection {
background: #ffffff;
color: #ffffff;
text-shadow: 0 0 0.2em  #fecdc9 , 0 0 0.2em #fecdc9;
}

::selection {
background: #ffffff;
color: #ffffff;
text-shadow: 0 0 0.2em  #fecdc9 , 0 0 0.2em #fecdc9;
}
 4. 好了之后,按 preview 测试代码有没有问题,按 保存 即可。

小解释
红色代码:highlight 的背景色(可依据你的部落格背景色更改)
蓝色代码:highlight 时字体的颜色(可更改)
紫色代码:阴影(shadow)的颜色(可更改)

建议:
1. 这两种教程只可以选一种来使用,不要因为要掺所以两种一起用,效果就会看不见了
2. ::-moz-selection { 与 ::selection { 里面的代码颜色或什么一定要一样的,不要乱乱放了,不然看不见效果。

2 comments:

  1. Replies
    1. 可以,将代码添加在 [/style] 上面就可以了。

      [] 改成 <>

      -replied by Bii.

      Delete

っ 谢谢你耐心的看完这篇帖子 ♥
っ 评论将在博主审核后发布,如有不便,敬请原谅哦 :)
っ 除了评论之外,亲也可以选择在 Cbox 留言或 PM 我的部落格专页信箱

ベ 请用词确切,勿使用脏字哟
ベ 部落格不接受匿名评论,评论前请确保你拥有 Google Account 哦
ベ 请仔细列明你的问题好方便我回答哦 :)

* 感谢你的留言,欢迎下次再来。