跳到主要內容

CSS 的 border 是用來設計網頁元素邊框用的

CSS 用來設計網頁元素的邊框超級好用,無論是圖片的邊框、文字的邊框還是文字輸入欄位的邊框都很簡單,而且都是用同樣的概念,在 CSS 中有一個叫做 border 的屬性,可以替網頁元素增加邊框效果,而且還可以設定樣式、粗細、顏色 ... 等特效,你也想玩玩看嗎?真的很實用,這裡寫個簡單的範例給各位瞧瞧 ^^

CSS border 邊框設計範例開始
<div style="border:2px red dashed;padding:20px;">
這裡是隨便寫的內容
</div>
程式碼的結果像這樣
這裡是隨便寫的內容
看到一個虛線邊框的效果了吧?!我們利用 CSS 的 border 邊框屬性將 DIV 區塊增加了外圍的紅色虛線邊框,而且粗細是 2px,有點粗又不會太粗,應該很清楚吧!

關於 CSS 的 border 邊框設計可以參考 WebTech 網頁上的這篇《CSS border 邊框設計》教學,自己嘗試用範例去做一點小小的變化,你也可以設計出很棒的網頁元素邊框效果,我們這篇範例也是從 WebTech 網頁上的例子修改來的。

這個網誌中的熱門文章

懂得藏拙的人才是真正的聰明人

一個懂得藏拙的人,才是真正厲害的人,首先,要會藏拙就要知道自己的不足在那裡,這樣代表你了解自己,同時也對自己誠實;有些人每天長篇大論,但是,卻一直將自己的缺點曝露在大家面前,這是因為他還沒停下思考,而把自己的缺點給大家看,這就是不懂得藏拙,就是會被人看透,如果還沾沾自喜,那就太膚淺了。

2014 狼人鎮 Wolves 比想像中好看

之前看到狼人鎮這部電影的預告,有產生一點興趣,不過因為個人比較喜歡看科幻電影,對於怪獸電影的喜歡程度沒有這麼高,尤其是看到狼人鎮裡面的狼人裝扮跟想像中的(如暮光之城)裡面的男人不太一樣,所以一直沒有去看這部電影,最近因為朋友邀約,所以一起看了這一步怪獸電影,發現比想像中的還要好看耶!

這是我的第一篇文章 140309

掀記錄一下這個部落格的第一篇文章,因為未來會有很多很多的分享,我希望在過幾年,回過頭來可以有個美好的開始,一個美好的回憶,今天是民國 103 年 3 月 9 日,星期天的晚上,就這樣開啟了這個部落格的序幕。