CSS3用过哪些新特性

html-css013

CSS3用过哪些新特性,第1张

关于CSS3,可以先查看一下文档

新特性有:

border-radius 圆角, @font-face 字体, box-shadow text-shadow 框和文本的阴影

word-wrap, background-size, background-origin, border-image, box-sizing, calc, linear-gradient 等等

transform 转换

rotate(XYZ) 根据x,y,z轴旋转

translate(XYZ), scale(XYZ) 同理

perspective 透视,这个很多3D效果都要设置一下,不然3D还是只会有”2D”的效果

rotate 旋转,图片转个90或180度什么的

translate 位置移动

scale, skew, matrix 等

2D 转换

3D 转换

transition: 过渡,简单的动画(如:移个位置,变个长短),直接用这个属性就能搞定。

animation: 动画,3D可以调用硬件渲染。

新的长度单位:rem, ch,vw,vh,vmax,vmin 等。其中ch:数字“0”的宽度,vw 相对于视窗的宽度:视窗宽度是100vw.

clip-path: 绘制路径,类似SVG技术。 国外炫酷产品。

flex: flex布局,继 table 和 div 后的趋势,不了解或不熟悉的可以参考cssreference。

伪类选择器:如::target, :enabled, :disabed, :first-child, last-child等等

@media 媒体查询,适用于一些响应式布局中

columns: 分栏布局。

will-change: 改善渲染性能, 参考使用CSS3 will-change提高页面滚动、动画等渲染性能。

第 1 选择器

第 2 RGBA和透明度

第 3 多栏布局

第 4 多背景图

第 5 Word Wrap

第 6 文字阴影

第 7 @font-face属性

第 8 圆角(边框半径)

第 9 边框图片

第 10 盒阴影

第 11 盒子大小

第 12 媒体查询

第 13 语音

扩展资料:

工作原理

CSS3原理同CSS,是在网页中自定义样式表的选择符,然后在网页中大量引用这些选择符[29]。

新增特性中transform的原理较为特殊,虽然使用位移函数translate()、缩放函数scale()、旋转函数rotate()和倾斜函数skew()可以简单地实现变形,但是变形中的矩阵函数都可以使用matrix()函数来代替。

新增特性

CSS3的新特征有很多,例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理(旋转、缩放、倾斜、移动)、多栏布局、媒体查询等。

参考资料:百度百科-css3