iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 23
0
Modern Web

每個人都可以做出理想中的網站!系列 第 23

Day23-CSS設計(8) / 版面設計(4)-Box Model(中中)

一樣要先來一張 Box Model 的說明圖啦!
https://ithelp.ithome.com.tw/upload/images/20191008/20120965R8qpip5WTD.png

border

border是一個很好用的邊框屬性,因為他不是只能用在div裡面,像是span啊或是img等等的也都適用。
border的語法比較特別,他的基本設定一口氣就來了三個,很多吧~~~不過一次記完就一次直接搞定設定啦!

<div style="border: 粗細 顏色 樣式"></div>
參數之間我們用空白間分開即可

  1. 邊框粗細 border-width: 就是邊框的寬度
  2. 邊框顏色 border-color: 邊框的底色
  3. 邊框樣式 border-style: 框線長什麼樣子
  • border-style的設定
    solid 實線 / double 雙線 / dotted 點狀 / dashed 虛線

(這邊還是先用div作範例)

<div style="border: 10px yellow solid">
    border的程式碼範例
</div>

上一篇
Day22-CSS設計(7) / 版面設計(3)-Box Model(中)
下一篇
Day24-CSS設計(9) / 版面設計(5)-Box Model(下)
系列文
每個人都可以做出理想中的網站!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言