CSS3中的background、shadow、reflect、mask

CSS3中新增添了很多功能,这些功能大大的增添了css的效果,下面来总结下CSS3中的background、shadow、reflect、mask。

background:
CSS的background可以设置如下属性:

background-color
背景颜色;

值可以为英文(eg:pink),十六进制(eg:#ccc)或rgb(0255,0255,0~255)。

注:rgba(0255,0255,0255,01); 最后一个参数为透明度

background-position
背景图像的位置;

默认值是0% 0%;

值可以为left、top、right、bottom、center,也可以是百分比(eg:50%),也可以是具体值(eg:20px 50px)。

注:当为百分比或具体值时必须按照x y的顺序写;

background-repeat
背景图片是否重复;

默认值是repeate;

值可以是repeat、repeat-x、repeat-y、no-repeat、inherit;

background-origin
该属性规定background-position相对于什么来固定背景;

默认值:padding-box;

值可以是border-box(相对于边框盒)、padding-box(相对于内边距)、content-box相当于内容框。

background-size
背景的尺寸;

默认值:auto;

值可以为百分比,具体值(width、height)、contain(以最小为主)、cover(以最大为主)。

background-image
背景图片;

值可以为url()、none、inherit。

background-attachment

如何设置固定的背景图片;

默认值:scroll;

值可以为scroll(背景图会随着页面其余部分滚动)、fixed(固定在页面中)、inherit、

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

默认值:border-box;

值可以为border-box、padding-box、content-box。

background的渐变效果
渐变效果中,又可以分为线性渐变、镜像渐变和重复渐变。

线性渐变:


background:linear-gradient(red,blue);

background: -webkit-linear-gradient(45deg,deeppink 10%,green 50%,yellow 80%);

-webkit-gradient是webkit引擎对渐变的实现参数,一共有五个:

第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变);

第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角);

第四个和第五个参数,分别是两个color-stop函数,color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色;

只有color时不需要处理兼容;

当有其他参数时需要加上处理兼容问题的前缀:-webkit;

径向渐变:

background: -webkit-radial-gradient(50% 0,circle,deeppink,aqua,yellow);

必须加上处理兼容的前缀:-webkit;

-webkit-gradient是webkit引擎对渐变的实现参数,一共有五个:

第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变);

径向渐变中还可以规定渐变的形状:circle(圆)、ellipse(椭圆);

第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角);

第四个和第五个参数,分别是两个color-stop函数,color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色;

重复渐变:

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

background:-webkit-repeating-radial-gradient(left top,red 0,red 10%,blue 10%,blue 20%);

shadow:
阴影可以设置文字阴影和块阴影。

文字阴影:
text-shadow

p{

font-size: 40px;

text-shadow: 10px 10px 40px #0000FF;

color:#000;

-webkit-text-stroke: 1px  #FFC0CB;

}

text-shadow:x y 模糊度 color;

其中:-webkit-text-stroke:描边宽度 描边颜色;表示文字描边。

块阴影:
box-shadow

.div1{

background: -webkit-linear-gradient(45deg,deeppink 10%,green 50%,yellow 80%);

box-shadow: 10px 10px 50px #FF1493,10px 15px 50px #FFFF00;

text-shadow:5px 6px 20px #666;

}

box-shadow:x y 模糊度 color;

还可以有多个值:box-shadow:x y 模糊度 color,x y 模糊度 color,x y 模糊度 color;

还可以规定阴影方向:

box-shadow:x y 模糊度 清晰度 color inset;

-webkit-box-reflect:
倒影

-webkit-box-reflect:above 0px -webkit-linear-gradient(rgba(0,0,0,0) 60%,rgba(0,0,0,1));

below 向下

above 向下

left 向左

right 向右

10px 间距

-webkit-mask:
朦版

-webkit-mask:url() no-repeat;

你可能感兴趣的:(CSS3中的background、shadow、reflect、mask)