HTML&CSS入門:為你的網頁換上精美的標題(Title)樣式

Table of Contents

Table of Contents

網頁上常看到h1, h2, h3...的蹤跡,標題是吸引人目光的一項重要要素。它能讓你想要呈現的重點很清楚地展現在讀者面前。本文介紹一些常見的標題設計,都是用CSS語法可以完成的簡單樣式,複製貼上即可使用。

標題上加上邊框

基本上使用border就可以完成。border可以設定上下左右四個邊,所以可以四個邊都加上設計,或是只挑想要設計的邊也可。

下面會展示了幾個範例,基本上都是使用以下的CSS設計衍生出來的樣式。
solid的部分可以換成dotteddasheddouble`。

.title {
  border: 3px solid #000;
}

最後一個範例展示了兩個框線,這裡使用了before的元素來實現。

標題上加上背景跟陰影

延續先前的css樣式,這次加上background搭配上beforeafter能夠形成陰影效果,也可以做出其他各式的表現。
特別是最後的標籤樣式,掌握其中變化的規則後,也可以設計出其他想要的樣式。