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

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


之前看別人的網頁有這樣的效果,以為是很難,沒想到只是兩段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>

點此看測試

FACY

我是小訣行銷工作室的Facy,這是我第二個網站專寫用來寫文章的,我喜歡寫部落格來記錄「把不會變會」的事,也喜歡教別人寫部落格,更有替人架設部落格網站的服務(就像本站)。
專長是WordPress客製化架站,且凡是網路行銷相關都興趣十足,特別是「關鍵字&內容行銷」! 目前主要是專職部落客網站接案製作架站教學,歡迎找我聊聊。

  • 如果您不用寫程式就能架站有興趣的話,可以加入FB社團一起交流。
  • 如果您需要更系統性的學習WordPress,歡迎參考我的線上課程或報名一對一家教班,或公開班(不定時配合開課單位開課)。
  • 如果您想當部落客且想要自架部落格網站且有自己網址,我也能替您服務或顧問式輔導架站
  • 架設網站請找我,點此看作品

發佈留言

如果您想收到新文章的通知,可以留下您的Email

我保證不會亂寄廣告信給你!

站內搜尋

訂閱本站

如果您想收到新文章的通知,可以留下您的Email

我保證不會亂寄廣告信給你!

小訣行銷工作室

如果需要架站(包含像本站類型部落格網站)、網頁設計教學服務、業配需求,歡迎參考小訣行銷工作室

贊助與鼓勵

您好,

如果我的網路筆記剛好有幫到您,不妨請我喝杯咖啡吧!😊