CSS3-颜色、文字

1、RGBA

RGBA颜色是Red,Green,Black,Alpha的简写，自然界中的颜色都是用这三种颜色混合而成的，Alpha设置透明度。

color: rgba(R,G,B,A);

R、G、B的取值范围为0-255或者0-100%
A的取值范围为0-1

color: rgba(255,255,255,0.5); //表示半透明白色

2、渐变色彩

CSS3 Gradient分为线性渐变（linear)和径向渐变(radial)。

background: linear-gradient(angle, color);

其中angle的取值为：角度（deg)、to left、to right、to top、to bottom，还可以是对角线 to top left、 to top right 、to bottom left、to bottom right

color可以有多个，还可以设置起止位置，如比例和像素等。

.box1{
  background: linear-gradient(to left, red, blue,green);
}
.box2{

  background: linear-gradient(113deg, red, blue,green);
}
.box3{
  background: linear-gradient(to left, red 50%, blue,green);
}

3、text-overflow

text-oveflow用来设置字体在超出范围时候的显式方式。

text-overflow: clip | ellipsis |string;

clip表示溢出部分剪切掉
ellipsis表示溢出部分显式为省略号...
string 表示溢出部分显示为字符串

当需要显示为省略号时，需要强制文本在一行内显示，并且盒子超出部分隐藏

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

word-wrap也可以用来
设置文本行为，当前行超过指定容器的边界时是否断开转行

word-wrap: normal | break-word;

normal表示正常换行。
break-word表示在容器边界强制换行，不管长单词或者URL是否结束

4、嵌入字体

@font-face可以嵌入字体，让浏览器端可以显示用户电脑没有安装的字体

@font-face {
    font-family: 字体名称；
    src: 字体路径；
}

此处的font-family在字体被嵌入之后就可以在以后的字体设置中直接使用font-family进行设置，名称为此定义的名称。

兼容性

IE 9以上才支持此属性，但是，也只支持.eot类型的
Firefox、Chrome、Safari和Opera支持.tff与.otf两种类型。

@font-face {
    font-family: fontName;
    src: url('../myFont.ttf'),
         url('../myFont.eot');//兼容ie9+
}

除了为字体设置名称和源文件之外，还可以设置font-stretch、font-style、font-weight、unicode-range

5、文字阴影

使用text-shadow设置文字阴影

`
text-shadow: x-Offset y-Offset blur color;

用法和box-shadow一样。