You are currently viewing wordpress2種螢光筆效果
wordpress2種螢光筆效果

wordpress2種螢光筆效果

文章中某些重要的句子,應該要用螢光筆畫起來。但是,怎麼樣在文章上可以做到螢光筆效果? 又有哪些螢光色碼可以使用? 本篇文章介紹兩種方式  Html 搭配 css  和 短代碼(Shortcodes Ultimate) 

使用HtmlCSS語法的螢光筆效果

1.劃出重點文字  <=左邊有顏色的重點文字語法在下方

1.劃出<span style=”background:linear-gradient(transparent 40%,rgba(255,255,255,0) 40%, #FFF176 90%,transparent 95%)”>重點</span>文字

2.劃出重點文字  <=左邊有顏色的重點文字語法在下方

2.劃出<span style=”background:linear-gradient(transparent 40%,rgba(255,255,255,0) 40%, #7fbfff 50%,transparent 70%)”>重點</span>文字

3.劃出重點文字  <=左邊有顏色的重點文字語法在下方

3.劃出<span style=”background:none; border-bottom:3px solid #EC407A; margin:0 -2px; padding:0 2px”>重點</span>文字

你可以先參考這篇文章安裝:Shortcodes Ultimate

文章中使用短代碼的螢光筆效果

比較簡單的方式可以使用短代碼指定 背景色(background)文字(color) 的顏色

如下:

  重要文字 描述

[ su_highlight background=”#DDFF99″ color=”#000000″ ]重要文字[ /su_highlight ]描述

常用螢光色碼

以下是我常用的螢光色碼給你參考,可以搭配上面兩種螢光色的標註方式!

橘色線條:#ff9933
紅色線條:#ff3333
粉色線條:#e60073
桃色線條:#e600e6
紫色線條:#7300e6
靛色線條:#0000e6
藍色線條:#3399ff
綠色底線:#00b35a

歡迎分享轉載

蘇哪巧克力:wordpress2種螢光筆效果

This Post Has One Comment

  1. 特斯提奈

    非常實用的功能,Blog的文章重點,可以用類似螢光筆標註上去了! 感謝!

發佈留言