「这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战」
- border-radius 用于设置圆角边框
值：可以是长度或者百分比
值的格式：2个参数，参数间以/分隔；第 1 个参数表示水平半径或半轴，第 2 个参数表示垂直半径或半轴，如第 2 个参数值省略，则直接复制第 1 个参数值。
每个参数允许设置 1~4 个参数值；如果提供全部四个参数值，分别表示上左 top-left、上右 top-right、下右 bottom-right、下左 bottom-left；如果提供三个参数值，第一个表示top-left，第二个表示top-right和bottom-left，第三个表示bottom-right；如果提供两个参数值，第一个表示top-left和bottom-right，第二个表示top-right和bottom-left；如果只提供一个，将用于四个角
所以写全的话它的格式应该是
border-radius : 水平上左 水平上右 水平下右 水平下左 / 垂直上左 垂直上右 垂直下右 垂直下左
border-radius也可以拆分成border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius分别设置4个角。
但根据实际需求来设置，很多时候也不会设置那么多
<head>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
- border-image 设置边框背景图像 border-image也是复合属性可以设置5个值：
- border-image-source 设置图片来源，可以是图片路径也可以是渐变色
.test {
border: 10px solid;
border-image: linear-gradient(red, yellow) 10;
}
- border-image-slice 用于设置图像从哪里分割 该属性指定从上，右，下，左 4 个方位来分割图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字fill 除fill关键字外，该属性接受1~4个参数值，如果提供全部四个参数值，将按上、右、下、左的顺序进行分割；提供三个，第一个用于上，第二个用于左、右，第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，上右下左都使用该值进行分割。
.demo {
border-image-slice: 25% 30% 12% 20%;
}
- border-image-width 边框背景图像的厚度 默认值是1，所以该属性的计算值会是1 * border-width，相当于会直接使用border-width的定义。还可以是百分比或者长度
- border-image-outset 设置边框背景图像的外延尺寸 即是边框图像从边框边界向外偏移的距离 该属性接受1~4个参数值，如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时作用于四边。 厚度 本身并不占据布局空间，所以不会影响布局
- border-image-repeat 是否重复 取值： stretch：拉伸填充边框图像区域 repeat：重复平铺填充边框图像区域。图像碰到边界时，超过的会被截断 round：与 repeat 类似。但当背景图像不能以整数次平铺时，会根据情况缩放图像 space：与 repeat 类似，但当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围
border-image-repeat可以接受1~2个参数值，如果提供两个参数，第一个用于水平方向，第二个用于垂直方向；只提供一个，则水平和垂直方向都应用该值。
