css阴影，边框，渐变，背景

一、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
以元素最短的边计算背景图的大小