css3新特性都有哪些

Posted 2023-05-05

CSS3 新特性

包括

CSS3 选择器（Selector）

@Font-face 特性、

Word-wrap & Text-overflow 样式

Text-decoration

多列布局（multi-column layout）

边框和颜色，颜色支持透明度（color, border）

渐变效果（Gradient）

阴影（Shadow）和反射（Reflect）效果

盒子模型

Transitions, Transforms 和 Animation

比如：@Font-face 特性

@font-face
font-family: BorderWeb;
src:url(BORDERW0.eot);

@font-face
font-family: Runic;
src:url(RUNICMT0.eot);


.border FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb"
.event FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic"

更多参考：http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/

参考技术A 一、RGBA和透明度
RGBA是RGB色彩模型的一个扩展。在本质上看也是为设置的元素增加了一个 alpha 通道，即除了红绿蓝三种颜色外还增加一个代表透明度的通道，其中 RGB 值分别表示红色、绿色、蓝色，而 alpha 取值则为 0 到 1 （小数位一位）。
二、background属性
background-image：设置元素的背景图像。
background-origin：规定背景图片的定位区域。
background-size ：规定背景图片的尺寸。
background-repeat：设置是否及如何重复背景图像。
三、word-wrap属性
word-wrap 属性允许长单词或 URL 地址换行到下一行。
注：所有主流浏览器都支持 word-wrap 属性。
基础语法：
word-wrap: normal|break-word;

四、text-shadow属性
text-shadow 属性：向文本设置阴影。
text-shadow基础语法：
text-shadow： 5px 5px 5px #FF0000;

参数分别表示：水平阴影，垂直阴影，模糊距离，阴影颜色；

五、font-face属性
font-face属性：定义自己的字体
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
六、border-radius属性
border-radius 属性：是一个简写属性，用于设置四个 border-*-radius 属性。
基础语法：
border-radius: 1-4 length|% / 1-4 length|%;

注：该属性允许您为元素添加圆角边框！
七、border-image属性
border-image：将图片规定为包围 div 元素的边框
border-image基础语法：
border-image: url(border.png) 30 30 round

八、box-shadow属性
box-shadow属性：向框添加一个或多个阴影。（盒阴影）
box-shadow基础语法：
box-shadow: 10px 10px 5px #888888

九、媒体查询
媒体查询定义两套css，当浏览器的尺寸变化时会采用不同的属性。

CSS3用过哪些新特性

参考技术A 关于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提高页面滚动、动画等渲染性能。