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

1 Star2 Stars3 Stars4 Stars5 Stars (1已評分, 平均: 5.00 out of 5)
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」因人而異,請自行調整或視你用的主題去調整。

點此看測試

如果覺得這篇文章不錯,請幫我們讚一下!
Facebook
Google+
Telegram
E-mail
本文作者 :
※你可能也喜歡:
有話想說嗎?

發表迴響

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