前言
border 主要用途是設定物件的邊框線, outline 是設定物件的外框線,這兩個很類似,但卻有一些細節有所差異,可以簡單用下列兩點快速比較:
- border 可以有「 占據空間 」的特性, outline 則沒有。
- border 的外觀可以做圓角, outline 則永遠為矩形( 物件的矩形空間 )。
因為 border 可以支援圓角,所以在實務使用次數上面, border 的機會也多過於 outline 。( 以我來說啦哈哈哈 )
( 圖片來源 )
之前也有寫過相關文章,所以這裡只會簡略說明,想看更詳盡的介紹 這邊 歡迎光臨!
官方網站的 Borders 頁面
增加邊框
<span class="border">border</span>
<span class="border-top">border-top</span>
<span class="border-end">border-end</span>
<span class="border-bottom">border-bottom</span>
<span class="border-start">border-start</span>
減少邊框
<span class="border border-0">border-0</span>
<span class="border border-top-0">border-top-0</span>
<span class="border border-end-0">border-end-0</span>
<span class="border border-bottom-0">border-bottom-0</span>
<span class="border border-start-0">border-start-0</span>
邊框顏色
<span class="border border-primary">border-primary</span>
<span class="border border-secondary">border-secondary</span>
<span class="border border-success">border-success</span>
<span class="border border-danger">border-danger</span>
<span class="border border-warning">border-warning</span>
<span class="border border-info">border-info</span>
<span class="border border-light">border-light</span>
<span class="border border-dark">border-dark</span>
<span class="border border-white">border-white</span>
邊框寬度
<span class="border border-1">border-1</span>
<span class="border border-2">border-2</span>
<span class="border border-3">border-3</span>
<span class="border border-4">border-4</span>
<span class="border border-5">border-5</span>
邊框圓角
<img src="https://via.placeholder.com/100" class="rounded-top" alt="">
<img src="https://via.placeholder.com/100" class="rounded-end" alt="">
<img src="https://via.placeholder.com/100" class="rounded-bottom" alt="">
<img src="https://via.placeholder.com/100" class="rounded-start" alt="">
<img src="https://via.placeholder.com/100" class="rounded-circle" alt="">
<img src="https://via.placeholder.com/200x100" class="rounded-pill" alt="">
邊框尺寸
使用縮放的 class 將圓角放大或縮小,尺寸的範圍為 0 到 3 。
<img src="https://via.placeholder.com/150" class="rounded-0" alt="">
<img src="https://via.placeholder.com/150" class="rounded-1" alt="">
<img src="https://via.placeholder.com/150" class="rounded-2" alt="">
<img src="https://via.placeholder.com/150" class="rounded-3" alt="">