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」因人而異,請自行調整或視你用的主題去調整。

點此看測試

如果您喜歡這篇文章,請幫我們按個讚!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *