2018-04-16关于CSS3-背景，渐变，小结

一： background- 新属性

1.

如何给同一个元素定义两个背景图像

background-image:url(../images/t.png),url(../images/a.png)

background-position:left center , right center;               

background-repeat:no-repeat;

2.

指定背景图像的位置区域(了解)

background-Origin  指定背景图像的位置区域,可以位于 border  、padding 、也可以在content

3.

背景裁剪属性是从指定位置开绘制(了解)

background-clip

二： 渐变         

(浏览器支持不是很好,可能无法显示时用: -ms-  -o-  -m0z-  -webkit-)

分两种:       

线性渐变:linear-gradient  (横着)                      至少定义两种颜色值

径向渐变radial -gradient  （竖着）

1. 线性渐变：

写法: background:linear-gradient(red,blue);  至少两种颜色

线性渐变,颜色从左到右的写法

background: linear-gradient(to right,red,blue);  to right  定义了  第一个颜色向 右 过渡。

background:linear-gradient(to bottom right,red,blue);    对角渐变,  第一个颜色向 右下过渡。

同样,可以使用角度,来做渐变效果。 写法:

background:linear-gradient(角度,red，blue);

即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。

重复的线性渐变          %定义颜色的宽度

background: repeating-linear-gradient(to right,red,blue 10%,green 20%)

2. 径向渐变:(理解为有某个点向四周扩散)

background: radial-gradient(red,yellow,green);

也可加入%定义大小

background: radial-gradient(red 20%,yellow 50%,green 3%);

径向渐变有两个值,规定的渐变是圆形还是椭圆,默认值市椭圆形

circle  定义圆形,    默认值  ellipse 椭圆形

background: radial-gradient(red,yellow,green);

重复的径向渐变

background:repeating-radial-gradient(red,yellow,blue)

三： 文本效果

text-shadow box-shadow text-overflow word-wrap word-break

1.text-shadow:  与box-shadow作用差不多,  应以了 文本的阴影效果,可以做成文字的3D感觉

如何控制文本的溢出:

text-overflow:hidden;  文本溢出隐藏

text-overflow:ellipsis;  定义文本多出的内容省略号显示

文本换行:

word-wrap:break-word;  例如:英文,换行时,整个单词换行。

word-wrap:break-all;        单词拆分换行。

四： 字体

@font-face