邊框 border

border 是以下三種邊框樣式的簡寫：

• border-width 邊框寬度 —— 數值 px（像素）,thin（細）,medium（中等）,thick（粗）
• border-style 邊框線型 —— none【默認值】，dashed（橫線）,dotted（點）,solid（實線）,double（雙實線，當邊框>=3px才有效果）
• border-color 邊框顏色 —— 顏色值，默認顏色是color色值

語法為

border：邊框寬度 邊框線型 邊框顏色

• 三種樣式的順序沒有要求，用空格分開即可。
• 會同時設置上、下、左、右邊框的樣式

范例

<template><div class="box"></div>
</template>
<style scoped>
.box {border: 1px solid red;height: 60px;width: 60px;
}
</style>

分開設置邊框樣式

• border-top 上邊框
• border-right 右邊框
• border-bottom 下邊框
• border-left 左邊框

樣式值的語法和 border 相同

<template><div class="box"></div>
</template>
<style scoped>
.box {border: 1px solid red;border-right: 2px solid blue;height: 60px;width: 60px;
}
</style>

清除邊框

將樣式值設置為 none 或 0 即可

邊框-圓角 border-radius

值可以為長度單位 px 等，或用 % ，值為 50% 時矩形會變為橢圓，正方形會變為圓形！

邊框的每個角，本質上是一個圓，圓的水平半徑和垂直半徑相等時，就是圓；如果二者不等， 就是橢圓。

四個角的半徑都相同時：

border-radius:10px;

用/區分水平半徑和垂直半徑

border-radius: 30px / 60px;

斜杠前后都支持1～4個長度值。

/* 左上 右上+左下 右下 / 左上 右上+左下 右下 */
border-radius: 10px 5px 2em / 20px 25px 30%;
/* 左上+右下 右上+左下 / 左上 右上 右下 左下 */
border-radius: 10px 5% / 20px 25em 30px 35em;

分別定義各個角：（用空格區分水平半徑和垂直半徑）

border-top-left-radius: 60px 120px;        //左上角
border-top-right-radius: 60px 120px;       //右上角
border-bottom-left-radius: 60px 120px;     //左下角
border-bottom-right-radius: 60px 120px;    //右下角

復合寫法：

border-radius: 60px/120px;             //參數：水平半徑/垂直半徑
border-radius: 20px 60px 100px 140px;  //從左上開始，順時針賦值。如果當前角沒有值，取對角的值
border-radius: 10px 50% 30px; // 第一個值作用于左上角，第二個值作用于右上角和左下角，第三個值作用于右下角
border-radius: 20px 60px;

border-radius 屬性的其他特征

• 不支持負值
• 圓角以外的區域不可點擊，無法響應click事件。
• 沒有繼承性，父元素設置了border-radius，子元素依然是直角效果。可以通過給父元素設置overflow:hidden讓子元素視覺上表現為圓角。
• 可以應用于display的計算值為table、inline-table或者table-cell的元素上的，但是有一個前提，那就是表格元素的border-collapse屬性值需要是separate（separate是border-collapse屬性的默認值），如果border-collapse屬性值是collapse，那么是沒有圓角效果的。

重疊曲線的渲染機制

https://blog.csdn.net/weixin_41192489/article/details/120463380

當 border-radius 遇上有厚度的 border

https://blog.csdn.net/weixin_41192489/article/details/120463590

【實戰】不規則的圓角頭像

https://demo.cssworld.cn/new/4/2-1.php

https://demo.cssworld.cn/new/4/2-2.php

https://www.zhangxinxu.com/study/201702/cicada-principle-border-radius.html

【實戰】繪制角標、對話框的小尾巴

https://demo.cssworld.cn/new/4/2-3.php

邊框-填充 border-image

• border屬性不能寫在border-image屬性的下方，否則border-image會失效，因為border屬性的縮寫中包含了border-
  image相關屬性的信息。

• 若自定義邊框圖片，因圖片渲染規則與現實設計不符，很少使用，簡單了解即可。

  border-image: url("images/border.png") 27/20px round;
  

單獨設置邊框圖片的屬性

/* 邊框圖片的路徑*/
border-image-source: url("images/border.png");/* 圖片邊框的裁剪*/
border-image-slice: 27;/*圖片邊框的寬度*/
border-image-width: 27px;/*邊框圖片的平鋪*/
/* repeat :正常平鋪 但是可能會顯示不完整*/
/*round: 平鋪 但是保證 圖片完整*/
/*stretch: 拉伸顯示*/
border-image-repeat: stretch;

【實戰】漸變邊框

<template><p class="border-linear-gradient">上下漸變邊框</p><p class="border-radial-gradient">徑向漸變邊框</p>
</template>
<style scoped>
.border-linear-gradient {border: 10px solid;border-image: linear-gradient(deepskyblue, deeppink) 20 / 10px;
}
.border-radial-gradient {border: 10px solid;border-style: solid;border-image: radial-gradient(deepskyblue, deeppink) 20 / 10px;
}
</style>

【實戰】圓角漸變邊框

border-radius屬性無法改變 border-image 屬性生成的圖形效果，所以需要使用其他的方法。

方法一：使用clip-path

.clip-path {clip-path: inset(0 round 10px);
}

方法二：外層嵌套一層div元素，然后設置圓角和溢出隱藏

.father {border-radius: 10px;overflow: hidden;
}

【實戰】紅色條紋邊框

<template><div class="border-stripe">用紅色條紋邊框表示警示</div>
</template>
<style scoped>
.border-stripe {border: 12px solid;border-image: repeating-linear-gradient(-45deg, red, red 5px, transparent 5px, transparent 10px)12;
}
</style>

【實戰】模擬自定義的虛線

<template><div class="border-dashed">1:1的虛線</div>
</template>
<style scoped>
.border-dashed {border: 1px dashed deepskyblue;border-image: repeating-linear-gradient(135deg,deepskyblue,deepskyblue 5px,transparent 5px,transparent 10px)1;
}
</style>

border-image屬性最適合模擬寬度為1px的虛線邊框。如果邊框寬度比較大，實線的端點就會有明顯的斜邊，此時建議使用background-image屬性和線性漸變語法進行模擬，或者干脆使用SVG元素配合stroke-dasharray實現更靈活的邊框效果。

使用 stroke-dasharray 實現任意比例和任意比例數量的虛線

https://blog.csdn.net/weixin_41192489/article/details/121636736

輪廓 outline

outline （輪廓）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。

• 不會占據空間，也不一定是矩形

值	描述
outline-color	規定邊框的顏色（默認值為color的顏色值）。參閱：outline-color 中可能的值。
outline-style	規定邊框的樣式。參閱：outline-style 中可能的值。
outline-width	規定邊框的寬度。參閱：outline-width 中可能的值。
inherit	規定應該從父元素繼承 outline 屬性的設置。
outline-offset	設置輪廓的偏移位置 - 正值會擴大輪廓 - 負值會縮小輪廓（常用于避免輪廓被重疊覆蓋，見范例 https://demo.cssworld.cn/new/3/11-1.php）

outline:#00ff00 dotted thick;