CSS3 中的取值和单位

在 CSS3 中增加了很多度量的单位和取值，下面是项目开发中常用到的单位和取值。

1.长度值单位

• rem：相对长度单位。相对于根元素(即html元素) font-size 值的倍数。
• vw：相对于视口的宽度。视口被均分为100单位的vw，例如：

h1 {
  font-size: 8vw;
}
/*
  如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100。
*/

• vh：相对于视口的高度。视口被均分为100单位的vh（示例如上）。
• vmax：相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax，例如：

h1 {
  font-size: 8vmax;
}
/*
如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为24mm，即(8x300)/100，因为宽度比高度要大，所以计算的时候相对于宽度。
*/

• vmin：相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin（示例如上）。
  

2.角度值单位

• deg：度（Degress）。一个圆共360度。

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

3.时间值单位

• s：秒。

• ms：毫秒。

1s = 1000ms

4.颜色值

• RGBA：RGBA(R,G,B,A)，取值如下：

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数 | 百分数

A：Alpha透明度。取值0~1之间

5.图像值

• linear-gradient()

（1）语法：

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

（2）取值：

下述值用来表示渐变的方向，可以使用角度或者关键字来设置：

<angle>：用角度值指定渐变的方向（或角度）。

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

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

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

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

<color-stop>：用于指定渐变的起止颜色。

<color>：指定颜色。

<length>：用长度值指定起止色位置。不允许负值。

<percentage>：用百分比指定起止色位置。

使用示例：

<div class="test1"></div>
<div class="test2"></div>
<style>
  div {
    width: 200px;
    height: 100px;
    margin-top: 10px;
    border: 1px solid #ddd;
  }
  .test1 {
    background: linear-gradient(#000, #f00 50%, #090);
  }
  .test2 {
    background: linear-gradient(45deg, #000, #f00 50%, #090);
  }
</style>

效果预览：