CSS3 中的取值和单位
来源:互联网 发布:php获取qq信息 编辑:程序博客网 时间:2024/05/23 11:41
在 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>
效果预览:
0 0
- CSS3 中的取值和单位
- css3 中的尺寸单位
- CSS3中的rem单位
- CSS3中的长度单位(em、rem)
- 《CSS3权威指南》——笔记4(值和单位)
- Android中的单位和尺寸
- css3大小单位px、pt、em和rem的区别
- css3大小单位px、pt、em和rem的区别
- 【HTML5学习笔记】27:CSS3前缀和新单位rem
- css3新单位
- CSS3 相对单位rem
- css3 rem为单位
- CSS3新增长度单位
- CSS 单位和值
- 单位和值
- 单位和值
- 单位和值
- css值和单位
- Java回顾之Spring基础
- Linux下管理员权限获取(su和sudo的区别)
- Canada Cup 2016 D. Contest Balloons详解(贪心+优先队列)
- mysql ---创建简单的数据库
- Android监听网络变化
- CSS3 中的取值和单位
- Android7.0 多窗口特性
- Fragment间通信
- D3D11教程三十之ProjectiveTexturing(投影纹理)
- Python中的 __all__和__path__ 解析
- HDU 4135:Co-prime (容斥原理)
- 怎么参与到百度的开源项目中来
- PHP中关于composer那点事
- 静态函数和静态成员