在 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>
效果预览: