網頁上常看到h1, h2, h3...的蹤跡,標題是吸引人目光的一項重要要素。它能讓你想要呈現的重點很清楚地展現在讀者面前。本文介紹一些常見的標題設計,都是用CSS語法可以完成的簡單樣式,複製貼上即可使用。
基本上使用border
就可以完成。border
可以設定上下左右四個邊,所以可以四個邊都加上設計,或是只挑想要設計的邊也可。
下面會展示了幾個範例,基本上都是使用以下的CSS設計衍生出來的樣式。
solid的部分可以換成
dotted、
dashed、
double`。
.title {
border: 3px solid #000;
}
最後一個範例展示了兩個框線,這裡使用了before
的元素來實現。
延續先前的css樣式,這次加上background
搭配上before
跟after
能夠形成陰影效果,也可以做出其他各式的表現。
特別是最後的標籤樣式,掌握其中變化的規則後,也可以設計出其他想要的樣式。