CSS保健室｜border、outline

前言

border 主要用途是設定物件的邊框線， outline 是設定物件的外框線，這兩個很類似，但卻有一些細節有所差異，可以簡單用下列兩點快速比較：

1. border 可以有「 占據空間 」的特性， outline 則沒有。
2. border 的外觀可以做圓角， outline 則永遠為矩形（ 物件的矩形空間 ）。

因為 border 可以支援圓角，所以在實務使用次數上面， border 的機會也多過於 outline 。（ 以我來說啦哈哈哈 ）

（ 圖片來源 ）

border 屬性

border

border 簡寫屬性在一個聲明設置所有的邊框屬性。

我們還可以分別設定四邊的數值。

div {
  border-top: 1px solid #000; //上框線
  border-bottom: 4px dotted #009FCC; //下框線
  border-left: 2px dashed #FF8800; //左框線
  border-right: 1px solid #7A0099; //右框線
}

border-color

border-color 屬性設置四條邊框的顏色，此屬性可設置 1 到 4 種方位的顏色。

border-color: red green blue pink;
邊框顏色：上紅 右綠 下藍 左粉;

border-style

border-style 屬性用於設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式，只有當這個值不是 none 時邊框才可能出現。

邊線的寬度於不同的風格樣式下、有些不同的效果、不同的瀏覽器於立體框顏色顯示亦不同。

div {
    border-width: 5px;
    border-color: #555;
    border-style:
        none | hidden | dotted | dashed | solid | 
        double | groove | ridge | inset | outset; 
}

值	描述	範例
none	定義無邊框。
hidden	與 none 相同。 不過應用於表時除外，對於表， hidden 用於解決邊框衝突。
dotted	定義點狀邊框。
dashed	定義分段線。
solid	定義實線。
double	定義雙線， 雙線的寬度等於 border-width 的值。
groove	定義立體內凸邊框， 其效果取決於 border-color 的值。
ridge	定義立體浮凸邊框， 其效果取決於 border-color 的值。
inset	定義凹邊框， 其效果取決於 border-color 的值。
outset	定義凸邊框， 其效果取決於 border-color 的值。

（ 上表圖片來源皆截至 Chrome 瀏覽器 ）

border-width

border-width 簡寫屬性為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度。

只有當邊框樣式不是 none 時才起作用，不允許指定負長度值，可用的值除了數字以外，也可以用 thin （ 薄 ）、 medium （ 中等 ）、 thick （ 厚 ）。

語法	範例與描述	圖示
單值	border-width: 1em; 用一個值定義所有四邊
雙值	border-width: 1em 2em; 第一個值代表上下邊，第二個值則是左右邊。
三值	border-width: 1em 2em 3em; 第一個值代表上邊，第二個值代表左右邊，而第三個值代表下邊。
四值	border-width: 1em 2em 3em 4em; 這四個值分別代表上、右、下、左邊，順時針的方向由上開始排列。

border-radius

border-radius 屬性是一個簡寫屬性，用於設置四個 border-方位-radius 屬性。

border-top-left-radius：左上角。
border-top-right-radius：右上角。
border-bottom-right-radius：右下角。
border-bottom-left-radius：左下角。

語法	範例與描述	圖示
單值	border-radius: 1em; 用一個值定義所有四角。
雙值	border-radius: 1em 2em; 第一個值代表左上和右下角，第二個值則是右上及左下角。
三值	border-radius: 1em 2em 3em; 第一個值代表左上角，第二個值代表右上及左下角，第三個值則是右下角。
四值	border-radius: 1em 2em 3em 4em; 這四個值分別代表左上、右上、右下、左下，由左上開始的順時針排序。

每一個圓角又分為 X 軸（ 水平 ）及 Y 軸（ 垂直 ），先設定 X 軸（ 水平 ）再設定 Y 軸（ 垂直 ）。

所以如果想特別指定的話：

.left {
  border-radius: 10px / 30px; /* horizontal radius / vertical radius */
}
.right {
  border-radius: 30px / 10px; /* horizontal radius / vertical radius */
}

上面寫法也可以改成這樣

.left {
  border-radius: 10px 10px 10px 10px / 30px 30px 30px 30px;
}
.right {
  border-radius: 30px 30px 30px 30px / 10px 10px 10px 10px;
}

.left {
  border-top-left-radius: 10px 30px;
  border-top-right-radius: 10px 30px;
  border-bottom-right-radius: 10px 30px;
  border-bottom-left-radius: 10px 30px;
}
.right {
  border-top-left-radius: 30px 10px;
  border-top-right-radius: 30px 10px;
  border-bottom-right-radius: 30px 10px;
  border-bottom-left-radius: 30px 10px;
}

border-image

border-image 屬性是一個簡寫屬性，用於設置以下屬性：

border-image: none | < uri > [ < number > | < percentage >]{4} [ / < border-width >{1,4} ]? [ stretch | repeat | round ]{0,2}

border-image 通過指定一張圖片來取代 border-style 定義的樣式，但 border-image 生效的前提是： border-style 和 border-width 同時為有效值（ 即 border-style 不為 none ， border-width 不為 0 ）。

Firefox 支持替代的 -moz-border-image 規則， Opera 支持替代的 -o-border-image 規則， Safari 和 Chrome 支持替代的 -webkit-border-image 規則。

div {
    -moz-border-image: radial-gradient(circle, transparent 50px, yellow 51px, red) 50 stretch;
    -o-border-image: radial-gradient(circle, transparent 50px, yellow 51px, red) 50 stretch;
    -webkit-border-image: radial-gradient(circle, transparent 50px, yellow 51px, red) 50 stretch;
    border-image: radial-gradient(circle, transparent 50px, yellow 51px, red) 50 stretch;
}

小工具 border-image-generator ，只要將邊框圖載入後，就可用控制 bar 的方式，來分割出邊框圖的區域範圍，同時下方還會即時的顯示分割好的重覆畫面會長怎樣，當確定沒問題後，再把語法複製並貼到自己的網頁中。

徑向漸變不僅可以作為 background 的背景圖，還可以作為 border-image 的邊框圖使用，只可惜 border-image 是無法和 border-radius 同時生效的。

.radial-gradient {
    width: 300px;
    height: 200px;
    border: 50px solid;
    -webkit-border-image: radial-gradient(circle, transparent 50px, yellow 51px, red) 50 stretch;
    border-image: radial-gradient(circle, transparent 50px, yellow 51px, red) 50 stretch;
}

border-image-source

border-image-source 屬性規定要使用的圖像，代替 border-style 屬性中設置的邊框樣式。

border-image-slice

border-image-slice 就像忍者一樣，對！沒錯！我太愛拿忍者舉例哈哈哈，它會在圖片上切四刀，形成一個九宮格，保留頭顱和四肢後，再來決定中間的部分要怎麼處理，現在就帶你去了解一下。

（ 圖片來源 ）

border-image-slice 屬性規定圖像邊框的向內偏移。指定 4 個值（ 4 條分割線： top ， right ， bottom ， left ）將 border-image-source 分割成 9 宮格。

所以border-image-slice : 30% 35% 40% 30%;
即是距離圖片上部 30% 的地方，距離右邊 35% ，距離底部 40% ，左邊 30% 的地方各剪裁一下。也就是對圖片進行了四刀切，形成九宮格。

number 不帶單位， 1 代表 1 個圖片像素。

錯誤寫法

border-image-slice: 30px 30px 30px 30px;

要把單位全部都拿掉如下

border-image-slice: 30 30 30 30;

如果在 border-image-slice 中給出 fill 關鍵字，則中間圖像背景會被保留。

border-image: url(img.png) 27 27 27 27 fill;

如果有 border-image-width / border-image-outset 屬性值， border-image-slice 必須指定數值，否則不合語法，如：

border-image: url(box.png) 27 27 27 27 / 10px / 10px;

下方為 錯誤寫法

border-image: url(box.png) / 10px / 10px;

如果對背景圖上下左右進行 100% 的切割，即 div 四個角為整張背景圖，由於切割超過 50% ，兩個角之間的背景圖沒有重合部分，所以 border-image 無法進行拉伸。

div{
    width: 300px;
    height: 300px;
    border-width: 50px;
    border-image: url(img.png) 100% round;
    background: #ccc;
}

border-image-width

border-image-width 屬性規定圖像邊框的寬度，參數不能為負值，預設值為 1 。

在複合寫法中應該位於 slice 屬性 和 repeat 屬性中間用 / 間隔，
如：

border-image: url(border.png) 27 / 6rem / repeat;

（ 圖片來源 ）

運作順序如下

1. border-image-slice 分割 border-image-source 的九宮格為 A
2. border-image-width 分割 DIV 的九宮格為 B
3. 再把 A 分佈進 B 裡面

如果有 border-image-width / border-image-outset 屬性值， border-image-slice 必須指定數值，否則不合語法，如：

border-image: url(box.png) 27 27 27 27 / 10px / 10px;

下方為 錯誤寫法

border-image: url(box.png) / 10px / 10px;

border-image-outset

border-image-outset 屬性規定邊框圖像超過邊框盒的量，相當於把原來的貼圖位置向外延伸，可以把 border image area 的區域延伸到 border-box 之外，但不能為負值。

在複合寫法中一定要在 border-image-width 後面，用 / 間隔，如：

border-image: url(border.png) 27 / 6rem / 1.5rem /repeat;

向外延伸 1.5rem 再貼圖，假設缺 border-image-width，仍然需要在原來 border-image-width 寫上 / ，如：

border-image: url(box.png) 27 27 27 27 / / 10px;

下方為 錯誤寫法

border-image: url(box.png) 27 27 27 27 / 10px; //這樣寫 10px 會被當作 border-width

如果有 border-image-width / border-image-outset 屬性值， border-image-slice 必須指定數值，否則不合語法，如：

border-image: url(box.png) 27 27 27 27 / 10px / 10px;

下方為 錯誤寫法

border-image: url(box.png) / 10px / 10px;

border-image-repeat

卡卡西說當忍者，最基本的分身術是一定要會的，這次光分身就會學 repeat 、 round 、 space 三個，然後緊接著還要跟丁次討教 stretch 倍化之術，你再這樣慢吞吞的會遲到啊，我們趕快整理一下要出門了！

（ 圖片來源 ）

border-image-repeat 屬性規定圖像邊框是否應該被重複（ repeat ）、拉伸（ stretch ）或鋪滿（ round 、 space ）。該屬性規定如何延展和鋪排邊框圖像的邊緣和中間部分，因此，可以規定兩個值，如果省略第二個值，則採取與第一個相同的值。

div {
    border: 27px solid rgba(242,181,78,.3);
    border-image-source: url(img/img.png);
    border-image-slice: 34;
    border-image-repeat: 
        stretch | repeat | round | space;
}

屬性	說明	範例
stretch	將小圖片拉長來填滿邊框區域，圖片不循環，很顯然這樣邊框圖會變形。
repeat	邊框圖將會依次平鋪，填滿邊框區域，但有個瑕疵，就是當元素寬度或高度不是邊框圖的整數倍時，最後一個 / 第一個圖片不能完成顯示，會被遮擋一部分。
round	重複方式填滿，當無法以整數的倍數填滿時，就會依照整數倍數來縮放圖片並填滿。
space	重複填滿，用整數倍數填滿，其它不足的部分，再縮放圖片填滿。

outline 屬性

outline

outline （ 輪廓 ）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。 outline 不會佔據空間，也不一定是矩形。

border 可應用於幾乎所有有形的 html 元素，而 outline 是針對鏈接、表單控件和 ImageMap 等元素設計，從而另一個區別也可以推理出，那就是： outline 的效果將隨元素的 focus 而自動出現，相應的由 blur 而自動消失，這些都是瀏覽器的默認行為，無需 JavaScript 配合 CSS 來控制，而 border 可以自行定義四邊的邊框，但 outline 不支持 單獨為某一方向設置輪廓線，例如：

outline-left: 10px solid #339;

簡寫沒有包含 outline-offset 屬性。

outline 簡寫屬性可以按順序設置如下屬性：

1. outline-color
   設置元素輪廓的顏色，其取值與 border-color 類似，只有當 outline-style 不為 none 時才有效，默認為 transparent 。
2. outline-style
   設置元素輪廓的格式，其取值與 border-style 類似，但沒有 hidden 值，默認為 none ，無輪廓。
3. outline-width
   設置元素輪廓的寬度，其取值與 border-width 類似，只有當 outline-style 不為 none 時才有效。

outline-color

outline-color 屬性設置一個元素整個輪廓中可見部分的顏色，輪廓的樣式不能是 none ，否則輪廓不會出現，且必須聲明 outline-style 屬性，元素只有獲得輪廓以後才能改變其輪廓的顏色。

outline-style

outline-style 屬性用於設置元素的整個輪廓的樣式，樣式不能是 none ，否則輪廓不會出現。

div {
    outline-width: 5px;
    outline-color: #555;
    outline-style: 
        none | hidden | dotted | dashed | solid |
        double | groove | ridge | inset | outset;
}

屬性	說明	範例
none	定義無輪廓。
hidden	隱藏輪廓，基本上效果跟 none 一樣。
dotted	定義點狀的輪廓。
dashed	定義虛線輪廓。
solid	定義實線輪廓。
double	定義雙線輪廓，雙線的寬度等同於 outline-width 的值。
groove	定義 3D 凹槽輪廓。
ridge	定義 3D 凸槽輪廓。
inset	定義 3D 凹邊輪廓。
outset	定義 3D 凸邊輪廓。

（ 上表圖片來源皆截至 Chrome 瀏覽器 ）

outline-width

outline-width 屬性設置元素整個輪廓的寬度，只有當輪廓樣式不是 none 時，這個寬度才會起作用，如果樣式為 none ，寬度實際上會重置為 0 ，不允許設置負長度值。

outline-offset

outline-offset 屬性對輪廓進行偏移，並在邊框邊緣進行繪製（ 允許為負數 ）。
若你只需要兩層邊框，那可以先設置一層常規邊框再加上一層 outline ，不同於 box-shadow ，此方案可以製作出虛線邊框。

background: yellowgreen;
outline: 5px dotted deeppink;
outline-offset: -15px;

需要注意的地方

1. 只適用於雙層邊框的場景
2. 邊框不一定會貼合 border-radius 屬性產生的圓角，因此如果元素是圓角的，它的描邊可能還是直角的，但 box-shadow 卻是會的，如果我們把這兩者疊加到一起， box-shadow 會剛好填補描邊和容器圓角之間的空隙。

background: yellowgreen;
outline: 10px solid deeppink;
border-radius: 20px;
box-shadow: 0 0 0 10px #333; /*填補圓角*/

box-decoration-break

CSS 界的海星，屬於能自體再生的動物，如果其中一隻觸手被切斷，改個原始碼，過一段時間便能長回來，不信你去問問派大星。

（ 圖片來源 ）

box-decoration-break 屬性可以指定元素片段在跨行、跨列或跨頁（ 如打印 ）時候的樣式渲染表現，但只能影響部分 CSS 的渲染，如下：

• background
• border
• border-image
• box-shadow
• border-radius
• clip-path
• margin
• padding

IE 不支持， Firefox 全數支持， Opera 、 Safari 和 Chrome 支持替代的 -webkit-box-decoration-break 規則。

span {
    background-image: linear-gradient(135deg, deeppink, yellowgreen);
    color: #fff;
    padding: 2px 10px;
    border-radius: 50% 3em 50% 3em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

使用 box-decoration-break 來處理元素片段樣式時，該元素必須是 inline 元素（ 或者 display:inline 的其它元素 ），而且該元素不能使用取值為其它值的 display （ 比如 block 、 inline-block 、 flex 等），也不能運用於 float 和 position （ 取值為 absolute 和 fixed ）。

HTML

<div class="box">
    <span class="text">文字</span>
</div>

CSS

.box { width: 200px; color: #fff; }
.text {
    border-radius: 30px;
    background-color: chocolate;
    -webkit-box-decoration-break: slice | clone;
    box-decoration-break: slice | clone;
 }

屬性	說明	範例
slice	默認值。表示各個盒子斷開的部分如同切割開一般。 （ 圖片來源 ）	（ 可以看到換行的位置是直直切割，圓角在最開始和最後面 ）
clone	表示斷開的各個盒子樣式獨自渲染。 （ 圖片來源 ）	（ 可以看到斷開的兩個內聯盒子兩端都是圓角 ）

毛筆刷效果

span {
    background-image: linear-gradient(135deg, deeppink, yellowgreen);
    color: #fff;
    padding: 2px 10px;
    border-radius: 50% 3em 50% 3em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

螢光筆效果

p {
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}

box-shadow

「如果你從未體驗任何事情的黑暗面，那麼你的所在之地，鐵定沒有任何光芒。」—— Lady Gaga

原本想傳遞一點正能量，但後來覺得太像傳教了哈哈哈，在網頁設計上，適時加上陰影的確跟有裂縫的人生一樣，可以透進一些光芒進來，老闆，幫我點播黃乙玲的人生的歌，好搭配接下來的課程。

（ 圖片來源 ）

box-shadow 屬性向框添加一個或多個陰影。

box-shadow: h-shadow  v-shadow  blur  spread  color inset;

Firefox 支持替代的 -moz-box-shadow 規則， Safari 和 Chrome 支持替代的 -webkit-box-shadow 規則。

div{
    -moz-box-shadow: 2px 2px 5px #000;
    -webkit-box-shadow: 2px 2px 5px #000;
    box-shadow: 2px 2px 5px #000;
}

內陰影

box-shadow: 2px 2px 5px #000 inset;

陰影擴展

box-shadow: 0px 0px 5px 10px #000; /* 第四值是陰影擴展長度值 */

多重陰影

box-shadow: 
    0px 0px 0px 3px #bb0a0a,
    0px 0px 0px 6px #2e56bf,
    0px 0px 0px 9px #ea982e; /* 用逗點分開即可實現多重陰影 */

單側投影

如果陰影的模糊半徑，與負的擴張半徑一致（ 如下述原始碼的 5px 和 -5px ），那麼我們將看不到任何陰影，因為生成的陰影將被包含在原來的元素之下，除非給它設定一個方向的偏移量，所以這個時候，我們定一個方向的偏移值，即可實現單側投影。

box-shadow: -7px 0 5px -5px #333;

使用偽元素 ::before 和 ::after ，能創造出非常逼真的只有圖片才能實現的陰影效果。

HTML

<div class="box11 shadow"></div>

CSS

.box11 {
    width: 300px;
    height: 100px;
    background: #ccc;
    border-radius: 10px;
    margin: 10px;
}
.shadow {
    position: relative;
    max-width: 270px;
    box-shadow:
        0px 1px 4px rgba(0,0,0,0.3),
        0px 0px 20px rgba(0,0,0,0.1) inset;
}
.shadow::before ,
.shadow::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    transform: rotate(-3deg);
}
.shadow::after{
    right: 10px;
    left: auto;
    transform: rotate(3deg);
}

不同顏色的陰影，指定交錯的位移，也能呈現特別的視覺。陰影跨越到下方的元素也不會移動排版。

div {
    background-color: #eee;
    box-shadow:
        8px 24px 2px rgba(100%,0%,0%,0.4),
        16px -4px 2px rgba(0%,100%,0%,0.4),
        24px 12px 2px rgba(0%,0%,100%,0.4);
}

照片浮動效果

HTML

<div class="floating"></div>

CSS

.floating {
    width: 300px;
    height: 250px;
    background-color: #f9c919;
    position: relative;
    transform: translateY(0);
    transition: transform 1s;
}
.floating:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -30px;
    left: 50%;
    height: 8px;
    width: 100%;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    transform: translate(-50%, 0);
    transition: transform 1s;
}
.floating:hover {
    transform: translateY(-40px);
    transition: transform 1s;
}
.floating:hover:after {
    transform: translate(-50%, 40px) scale(0.75);
    transition: transform 1s;
}

撕便利貼的立體效果

div {
    position: relative;
    width: 600px;
    height: 100px;
    background: hsl(48, 100%, 50%);
    border-radius: 20px;
}
div::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    bottom: 0;
    border-radius: 10px;
    background: hsl(48, 100%, 20%);
    transform: translate(0, -15%) rotate(-4deg);
    transform-origin: center center;
    box-shadow: 0 0 14px 15px hsl(48, 100%, 20%);
    display: block;
    z-index: -2;
}

參考資料

1. CSS border 属性
2. CSS3 border-radius 属性
3. CSS3 border-image 属性
4. 10个demo示例学会CSS3 radial-gradient径向渐变
5. CSS3 中border-image詳解
6. CSS3 border-image-slice 属性
7. border-image 的正确用法
8. 关于css3的边框的border-radius和border-image用法的详解
9. CSS3 border-image-outset 属性
10. CSS3 border-image 彻底明白
11. CSS屬性總結（一）：background, border, outline
12. CSS outline-color 属性
13. CSS outline-width 属性
14. CSS/CSS3 box-decoration-break属性简介
15. CSS 揭秘（ Lea Verou 著／ CSS 魔法 譯 ）
16. CSS3 box-shadow 属性
17. CSS阴影效果(Box-shadow)用法趣味讲解
18. 超讚的 CSS 陰影技巧與細節
19. box-shadow 两种高大上用法！
20. CSS box-shadow 產生陰影效果或光暈效果的特性
21. 有趣的 box-decoration-break
22. Border & outline- 金魚都能懂的CSS必學屬性