本节代码

CSS 边框

边框的属性：线型 border-style、宽度 border-width、颜色 border-color
- 边框的简写：border: 1px solid red;
边框的背景图
边框衔接（三角形）

边框属性

`border-style` 边框样式

border-style 用于定义边框的样式。

属性值	说明
`none`	无边框。默认值
`solid`	实线边框
`dashed`	虚线边框
`dotted`	点状虚线边框
`double`	双线边框。两条单线与边框间隔的距离等于边框的宽度
`groove`	凹槽边框。阴影效果
`ridge`	垄状边框。高光效果
`inset`	内嵌边框。使内容出现在页面背景内
`outset`	外凸边框。使内容从页面背景外凸出

border-style: solid; /* 实线边框 */

border-style: dotted; /* 点状边框 */

border-style: outset; /* 使内容凸出 */

`border-width` 边框宽度

用于定义边框的宽度，可以使用像素（px）、百分比（%）、em 等单位。
也可以使用预定义值如 thin、medium、thick。

属性值	说明
length	像素值或其他长度单位，如 10px
`thin`	细边框
`medium`	中等宽度，默认值
`thick`	粗边框

border-width: 5px; /* 固定宽度 5px */

border-width: thin; /* 细边框 */

border-width: thick medium thin; /* 设置上、右、下三个边框的宽度 */

`border-color` 边框颜色

用于定义边框的颜色，可以使用颜色名称、十六进制值、RGB 值等来指定颜色。

属性值	说明
color	指定颜色名称如 `red`、`green`,或十六进制、rgb 值
`transparent`	设置为透明色

border-color: red; /* 红色边框 */

border-color: #ff0000; /* 十六进制红色 */

border-color: rgb(255, 0, 0); /* rgb 红色 */

border-color: transparent; /* 透明边框 */

border-color: red green blue yellow; /* 设置四个边框颜色 */

`border` 简写属性

border 属性可以用来同时设置边框的样式、宽度和颜色。
例如：border: 2px solid red; 表示边框宽度为 2 像素、实线样式、红色颜色的边框。

边框的背景图

CSS 中可以通过 border-image 属性来为边框添加背景图像，主要包含以下几个子属性：

border-image-source: 用于设置要使用的图像，可以是图片路径或渐变。
border-image-slice: 用于划分边框图像的九个区域。
border-image-width: 用于设置图像边框的宽度。
border-image-outset: 用于设置边框图像区域超出边框的量。
border-image-repeat: 用于设置是否以及如何重复图像边框。

`border-image-source` 边框图像源属性

border-image-source 属性是专门用于定义边框的背景图像的属性。
语法示例：border-image-source: url('border-image.png');

属性值	说明
`none`	不使用图像，默认值
image	图像的 URL 路径
`linear-gradient`	线性渐变
`radial-gradient`	径向渐变

border-image-source: none; /* 无图像 */

border-image-source: url(border.png); /* 指定 png 图片 */

border-image-source: linear-gradient(red, blue); /* 线性渐变 */

border-image-source: radial-gradient(circle, red, yellow, green); /* 径向渐变 */

`border-image-slice` 边框图像切片属性

border-image-slice 属性定义了边框图像的分割方式，指定了哪部分图像用于边框，而哪部分用于中间。
语法示例：border-image-slice: 30 fill;
- 30 表示从边框图像的边缘向内剪切 30 个像素。
- fill 表示使用图像的其余部分填充中间区域。
如果未指定，默认按照边框宽度等分图片。
fill 可以与其他值配合使用。

属性值	说明
number	可以是 1-4 个数字，分别表示各边切割的偏移量
percentage	可以是 1-4 个百分比，相对于图片大小计算偏移量
`fill`	将图片延伸到足够大以填充区域

/* 四个值分别表示上、右、下、左的切割位置 */
border-image-slice: 10px 20% 30px 5%;

/* 单个值表示四边使用同一偏移量 */
border-image-slice: 15%;

/* 使用 fill 延伸图片填充 */
border-image-slice: 10px fill;

`border-image-width` 边框图像宽度属性

border-image-width 属性定义了边框图像的宽度。
语法示例：border-image-width: 10px 20px;
- 这表示上下边框的宽度为 10 像素，左右边框的宽度为 20 像素。
如果有多个值，代表上、右、下、左 4 个边框的宽度。
如果只有一个值，则应用于所有边框。

属性值	说明
length	固定长度值，如 10px
percentage	相对于边框宽度的百分比，如 50%
number	表示 `border-image-slice` 中对应位置的分割标记值
`auto`	表示相应的 `border-width` 值

border-image-width: 10px; /* 固定宽度 */

border-image-width: 50%; /* 相对于边框宽度的百分比 */

border-image-width: 1; /* 使用 border-image-slice 中的第 1 个标记值 */

border-image-width: auto; /* 使用 border-width 作为图片边框宽度 */

`border-image-repeat` 边框图像重复属性

border-image-repeat 属性指定了边框图像的重复方式，可以是 stretch、repeat、round 等。
语法示例：border-image-repeat: round;

属性值	说明
`stretch`	拉伸图片来填充边框区域 (默认值)
`repeat`	平铺图片来填充边框区域
`round`	平铺图片来填充边框区域，图像尺寸可被边框长度整除时才会用一次图片填充
`space`	平铺图片来填充边框区域，在图像与边界之间插入空白间距

border-image-repeat: stretch; /* 默认值，拉伸图像 */

border-image-repeat: repeat; /* 平铺图像 */

border-image-repeat: round; /* 平铺，且只完整显示图像 */

border-image-repeat: space; /* 在图像之间添加空白间距平铺 */

`border-image-outset` 边框图像外延属性

border-image-outset 属性定义了边框图像的外延，用于扩展边框的大小。
语法示例：border-image-outset: 10px;
- 这表示边框图像会向外扩展 10 像素，覆盖元素的一部分。

属性值	说明
length	像素值，可以为 1 到 4 个值，代表四个方向的偏移量
number	使用边框背景图的边框宽度值

/* 四个方向偏移 10px */
border-image-outset: 10px 10px 10px 10px;

/* 上下偏移 5px，左右偏移 10px */
border-image-outset: 5px 10px;

/* 使用图片边框的宽度值 */
border-image-outset: 1;

`background-image` 背景图像属性

background-image 属性用于指定要应用于元素边框的背景图像。
语法示例：background-image: url('image.png');
使用步骤：
- 使用 border-image-source 指定背景图像。
- 使用 border-image-slice 来划分图片，四个值分别表示顶部、右侧、底部、左侧的切割位置。
- 使用 border-image-width 设置图片边框的宽度。
- 其他参数如 border-image-repeat、border-image-outset 等根据需要设置。
- 最后在元素上通过 border-image 属性调用。
一个简单的使用示例：
```
border-image: url(border.png) 30 stretch;
/* 使用 border.png 作为边框背景图像，拉伸显示并裁切 30px 来显示边框 */
```

边框衔接

在 CSS 中，你可以使用边框衔接（border triangle）技巧来创建各种三角形形状，例如向上、向下、向左、向右的三角形。这是通过利用边框和透明边框颜色的组合来实现的。

向上的三角形

要创建一个向上的三角形，你可以设置一个带有透明边框颜色的元素，然后隐藏上、左和右边框，只显示下边框。这会使元素的上、左和右边框看起来透明，只留下底部边框形成三角形。

.triangle-up {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid red;
}

向下的三角形

创建一个向下的三角形与向上的三角形相似，但这次只显示上边框，隐藏左、右和下边框。

.triangle-down {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid blue;
}

向左的三角形

要创建一个向左的三角形，隐藏上、下和右边框，只显示左边框。

.triangle-left {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid green;
}

向右的三角形

创建一个向右的三角形与向左的三角形相似，但这次只显示右边框，隐藏上、下和左边框。

.triangle-right {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid orange;
}

CSS 边框

边框属性

border-style 边框样式

border-width 边框宽度

border-color 边框颜色

border 简写属性