背景新增属性和css渐变及倒影

背景新增属性和css渐变及倒影

一、background新增属性

　　background-size：指定对象的背景图像的尺寸大小。

　　background:url() 0 0,url() 0 100%;多背景

　　background-origin：指定对象的背景图像定位的原点。

　　 background-clip：指定对象的背景图像向外裁剪的区域。

　　background-image：linear-gradient()线性渐变

　　background-image：repeating-linear-gradient()重复的线性渐变

　　background-image：radial-gradient()径向渐变

　　background-image：repeating-radial-gradient()重复的径向渐变

　　background-origin 设置背景定位的原点

　　border-box： 从border区域开始绘制背景。

　　padding-box： 从padding区域开始绘制背景。

　　content-box： 从content内容区域开始绘制显示背

　　background-clip 背景裁剪区域

　　border-box： 从border区域向外裁剪背景。

　　padding-box： 从padding区域向外裁剪背景。

　　content-box： 从content区域向外裁剪背景。

　　text：前景内容的形状（比如文字）作为裁剪区域向外裁剪 （需加前缀）

二、gradient渐变

　　gradient可以应用在所有接受背景图像的属性上

　　　　linear-gradient： (线性渐变） 创建遮罩图像。

　　　　radial-gradient： (径向渐变) 创建遮罩图像。

　　　　repeating-linear-gradient： 重复的(线性渐变) 创建遮罩图像。

　　　　repeating-radial-gradient： 重复的(径向渐变) 创建遮罩图像。

三、线性渐变

　　linear-gradient(角度，点，点，...)

　　　　角度的方位值：从什么方向开始渐变

　　　　to left： 设置渐变为从右到左。 相当于: 270deg

　　　　to right： 设置渐变从左到右。 相当于: 90deg

　　　　to top： 设置渐变从下到上。 相当于: 0deg

　　　　to bottom（默认）：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。

　　对角渐变：to top left | to top right | to bottom right | to bottom left

　　角度数值：从什么角度开始渐变，单位（deg）

　　点：渐变点的颜色和位置

　　颜色 ： 位置：%|px

　　　　如：red 50%, blue 100%(红色从50%渐变到100%为蓝色)

　　linear-gradient（30deg, red 10%, green 10%）

　　线性渐变重复平铺：repeating-linear-gradient：

四、径向渐变

　　radial-gradient( shape [ size ] at [ position ],color 位置,color 位置，+)

　　shape： circle（圆） | ellipse （椭圆 默认）

　　 size: 半径

　　　　圆形的半径圆只有一个值，椭圆有两个值，px | 关键词

　　关键词：

　　　　closest-side： 圆心到最近的边

　　　　closest-corner： 圆心到最近的角

　　　　farthest-side： 圆心到离圆心最远的边

　　　　farthest-corner(默认)： 圆心到离圆心最远的角

　　radial-gradient( shape [ size ] at [ position ],color 位置,color 位置，+)

　　position 确定圆心的位置，X坐标，Y纵坐标；如果只提供一个，第二值默认为50%，即center

　　　　值： 关键词 px % 　　

　　　　　　X关键词 ：left：左 center：中 right：右

　　　　　　Y关键词 ：top：上 center：中 bottom：下

　　　　　　例：radial-gradient(ellipse 100% 100% at 300px 300px, #f00 10%, #ff0 20%, #080 100%)

　　repeating-radial-gradient () 线性渐变重复平铺

五、盒子阴影

　　box-shadow 属性向框添加一个或多个阴影

　　　　box-shadow：h-shadow v-shadow blur spread color inset ;

　　　　　　h-shadow 水平阴影的位置。允许负值

　　　　　　v-shadow 垂直阴影的位置。允许负值

　　　　　　blur 模糊距离

　　　　　　spread 阴影的尺寸

　　　　　　color 阴影的颜色

　　　　　　inset 将外部阴影 (outset) 改为内部阴影

六、盒子倒影

　　　box-reflect：none | direction offset

　　　mask-box-image

　　　　direction: 倒影在对象的位置

　　　　　　above 上

　　　　　　below 下

　　　　　　left 左

　　　　　　right 右

　　　　offset：用长度值来定义倒影与对象之间的间隔,可以为负值 length | percentage

　　　　mask-box-image: 遮罩图像

　　　　　　<url>： 使用绝对或相对地址指定遮罩图像。

　　　　　　linear-gradient： 使用线性渐变创建遮罩图像。

　　　　　　radial-gradient： 使用径向(放射性)渐变创建遮罩图像。

　　　　　　repeating-linear-gradient： 使用重复的线性渐变创建背遮罩像。

　　　　　　repeating-radial-gradient： 使用重复的径向(放射性)渐变创建遮罩图像。

　　　　　　none：无遮罩图像

七、 MASKS遮罩/蒙版

　　-webkit-mask-image 遮罩图片

　　　　：url('');

　　　　linear-gradient

　　　　radial-gradient

　　 -webkit-mask-repeat 遮罩平铺

　　　　repeat

　　　　no-repeat

　　　　repeat-x

　　　　repeat-y

　　-webkit-mask-position 遮罩位置

　　　　关键词 | % | length

　　-webkit-mask-size 遮罩尺寸

　　　　 % | length

　　参考网址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask#浏览器兼容性