一、box-shadow:
参数1，参数2 阴影位置偏移量
参数3 模糊半径
参数4 扩展半径
负数
0 默认值
正数
参数5 阴影的颜色
参数6 设置内阴影
inset
默认是外阴影
多个阴影使用,分割
阴影默认大小与元素大小一致
二、图片边框
border-image:
生效前提：
边框大于0
border-image-source:
引入一张图片
1、 url();
2、 渐变函数
border-image-slice:
裁剪图片
fill --- 使用图片填充四个角
number --- 只能是数值，不能加像素
可以有4个值，分别代表 TRBL （上右下左）
border-image-repeat:
代表四条边的图片是否平铺样式
-- stretch 拉伸
-- repeat 平铺，不确保图片完整性
-- round 平铺，确保图片完整性
border-image-width:
设置边框宽度，该宽度不影响盒子的大小。默认向内部渲染。
border-image-outset:
向外部显示边框，不影响盒子的大小。
三、 外轮廓
outline:
属性值与border完全一致，
显示一个外轮廓，该轮廓不影响盒子的大小
outline-offset:
外轮廓偏移量
正值：向外渲染
负值：向内渲染
使用outline: none,取消外轮廓
四、调整块元素的大小
resize
-- vertical 垂直方向
-- horizontal 水平方向
-- both 垂直方向, 水平方向
必须配合：
overflow: auto;
五、渐变函数
本质：绘制了一个和元素大小相同的一张图片
线性渐变
linear-gradient(方向/角度, 颜色1 颜色1渐变开始位置, 颜色n 颜色n渐变开始位置 );
方向:
--- to bottom (从上到下)
--- to top (从下到上)
--- to right (从左到右)
--- to left (从右到左)
角度：
--- 0deg === to top (从下到上)
--- 45deg === 0deg 顺时针旋转45deg
--- -30deg === 0deg 逆时针旋转30deg
重复的线性渐变
repeating-linear-gradient(方向/角度, 颜色1 0, 颜色1 10px, 颜色2 10px, 颜色2 20px);
径向渐变
radial-gradient(形状 半径 at 圆心坐标, 颜色1 颜色1渐变开始位置, 颜色n 颜色n渐变开始位置 );
形状
-- circle 圆形
-- ellipse 椭圆（默认值）
重复的径向渐变
repeating-radial-gradient(形状 x半径 y半径 at 圆心坐标, 颜色1 0, 颜色1 10px, 颜色2 10px, 颜色2 20px );
形状
-- circle 圆形
-- ellipse 椭圆（默认值）
六、背景
背景图裁剪：
background-clip:
border-box
padding-box
content-box
文本背景裁剪
-webkit-background-clip:text
-webkit-text-fill-color: transparent
背景的定位的原点
background-origin:
border-box
padding-box (默认)
content-box
背景的大小
background-size
x y
cover
以元素最长的边计算背景图的大小
contain
以元素最短的边计算背景图的大小