边框、背景、渐变、过渡

边框图片（border-image）

border-image 设置边框的背景图片.

border-image-source 设置边框图片的地址.

border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

border-image-outset 边框图像区域超出边框的量

border-image-width 图片边框的宽度

border-image-slice 图片边框向内偏移（裁剪图片）

背景（background）

background-origin 定位背景图像

background-origin: padding-box|border-box|content-box;

值	描述
padding-box	背景图像相对于内边距框来定位。
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位。

background-clip 规定背景的绘制区域

background-clip: border-box|padding-box|content-box;

值	描述
border-box	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

background-size 规定背景图像的尺寸

background-size: length|percentage|cover|contain;

值	描述
length	设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 “auto”。
percentage	以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 “auto”。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

多背景

left top 左上

right top 右上

right bottom 右下

left bottom 左下

center center 中间

渐变（gradient）

线性渐变（linear-gradient）

background-image: linear-gradient(to left,yellow,green);

background-image: linear-gradient(45deg,green,yellow);
45deg：45度倾斜渐变
background-image: linear-gradient(to left,yellow,deeppink,purple,skyblue);
background-image: linear-gradient(120deg,yellow 0%,yellow 25%,pink 25%,pink 50%,
							purple 50%,purple 75%,skyblue 75%,skyblue 100%);

background: linear-gradient(180deg,yellow,deeppink,purple,skyblue);

径向渐变（radial-gradient）

background-image: radial-gradient(at center,yellow,green);
关键词：at
位置：center、left top、right top、right bottom、left bottom
background-image: radial-gradient(at left top,yellow,green);
background-image: radial-gradient(at 50px 50px,yellow 0%,green 50%,red 100%);
50px 50px：渐变位置
background-image: radial-gradient(100px 50px at center,yellow,green);
100px：渐变范围
100px 50px：渐变范围椭圆显示

过渡（transition）

简写

transition: property duration timing-function delay;

transition-property 过渡属性

transition-duration 过渡时间

transition-timing-function 过渡速度

值	描述
linear	匀速
ease	平滑过渡
ease-in	由慢变快
ease-out	由快变慢
ease-in-out	由慢变快又变慢

transition-delay 过渡的延迟加载