css3背景切割，原点，渐变

一、css3背景切割

语法：background-clip:border-box|padding-box|content-box;

border-box 默认值，背景在border以及border以内的区域可见

padding-box 背景在padding区域和content区域可见

content-box 背景只在content区域可见

注：background-clip就是用来设置背景在哪个区域可见

二、背景原点

语法：background-origin:padding-box|border-box|content-box;

padding-box 默认值，背景原点从padding区域开始

border-box 背景原点从border区域开始

content-box 背景原点从content区域开始

注：background-origin主要用来设置背景图的定位区域

注：我们经常将背景切割和背景原点结合使用

eg: background-clip:content-box;
background-origin:content-box;

背景在content区域可见，背景原点从content区域开始

三、背景尺寸

语法：background-size:数值|百分比|cover|contain;

1.数值

以数值的方式来设置背景图的宽度和高度，第一个值代表宽度，第二个值代表高度，当省略第二个值时，默认为auto,等比例缩放

eg1: background-size:400px 150px; (有可能会发生变形,不会超出容器)

eg2: background-size:400px; (不会发生变形，有可能超出容器)

2.百分比

以容器宽高的百分比来设置背景图的大小

eg1: background-size:100% 100%; (背景图不会超出容器，但是有可能会发生变形)

eg2: background-size:100%; (背景图有可能超出容器，但是不会发生变形)

3.cover

将背景图扩展至足够大，以使背景图完全覆盖背景区域，背景图有可能超出容器，不会发生变形

4.contain

把图像扩展至最大尺寸，以使宽度和高度完全适应内容区域。背景图像始终被包含在容器内,不会发生变形

四、hsla模式

语法：background:hsla(h,s,l,a);

h 色调，取值范围0~360

s 饱和度，取值范围0%~100%

l 明度，取值范围0%~100%

a 透明度，取值范围0~1

五、多背景图

语法：background:url(1.jpg) no-repeat left top,
url(2.jpg) no-repeat right top,
url(3.jpg) no-repeat right bottom,
url(4.jpg) no-repeat left bottom,
url(5.jpg) repeat;

六、背景渐变

1.线性渐变

语法：background:linear-gradient(方向,颜色值 渐变位置,颜色值 渐变位置);

eg: background:linear-gradient(to right,red 0%,blue 20%,green 30%);

注：重复的线性渐变，写法如下：

background:repeating-linear-gradient(red 0%,blue 10%,green 20%);

注：设置重复的线性渐变时，一定要指定渐变位置

2.径向渐变

语法：background:-webkit-radial-gradient(中心点位置,形状 渐变半径长度,颜色值 渐变位置,颜色值 渐变位置);

eg: background:-webkit-radial-gradient(left top,circle closest-corner,red 0%,green 20%);

注：a) circle 默认渐变形状为椭圆，设置为circle时为圆形

b) closest-corner 渐变半径为圆心到离圆心最近的角

closest-side ----------------------------边

farthest-corner -------------------------远的角

farthest-side -------------------------远的边

注：重复的径向渐变，写法如下：

background:-webkit-repeating-radial-gradient(red 0%,green 10%,yellow 15%);

扩展一、蒙版

语法：-webkit-mask-image:url(图片路径)|使用渐变作为蒙版;

扩展二、背景在文本区域可见

语法：-webkit-background-clip:text;

注：设置为text时，字体颜色必须设置为透明

七、图像边框

1.图片边框路径

语法：border-image-source:url(图片路径);

2.图像边框裁剪位置

语法：border-image-slice:数值;

注：默认情况下，中间部分不显示，添加fill即可显示

eg: border-image-slice:27 fill; (设置数值专指像素)

3.图像边框平铺属性

语法：border-image-repeat:stretch|repeat|round;

stretch 默认值，拉伸

repeat 平铺，会出现不完整的图像

round 铺满，不会出现不完整的图像

eg: border-image-repeat:round stretch;

水平方向铺满，垂直方向拉伸