CSS筆記-同一條框線有深淺顏色

1 Star2 Stars3 Stars4 Stars5 Stars
Loading...

其實也不知該怎麼下這個標題較好,同一條框線有深與淺兩種顏色,之前看下圖比較快:

之前看別人的網頁有這樣的效果,以為是很難,沒想到只是兩段CSS語法的搭配而已,摘錄如下:

.single-post h3 {
border-bottom: solid 2px #c5c5c5;
}

.single-post h3 b {
border-bottom: solid 2px #fc0c1b;
}

就是把h3設下框線(淺色),而b也設下框線(深色),

然後把要做出圖中效果的文字用 h3與b標籤先後包起來即可,

如:

<h3><b>作者</b></h3>

註:上面的「.single-post」因人而異,請自行調整或視你用的主題去調整。

寫成同一句的話,

<div style=”border-bottom:2px solid #c5c5c5;margin-left:4px;”>

<b style=”border-bottom:2px solid #d17b1f”>熱銷商品</b>

</div>

點此看測試

今晚有風

我是今晚有風,我喜歡寫部落格來記錄「把不會變會」的事,也喜歡教別人寫部落格,更有替人架設部落格網站的服務(就像本站)。
凡是網路行銷相關都興趣十足,特別是「關鍵字&內容行銷」! 目前主要是專職部落客網站接案製作架站教學,歡迎找我聊聊。

  • 如果您免寫程式的架站有興趣話的,可以加入FB社團一起交流。
  • 如果您需要更系統性的學習,歡迎參考我的線上課程
  • 如果您想當部落客且想要自架站,我也能替您服務或顧問式輔導架站。
※你可能也喜歡 :

發表留言

發表留言

推薦閱讀 :
推薦閱讀 :
以新手而言,沒有做網站能力也沒有投放廣告的能力,更沒有資金預…