CSS3新特性

Posted 2023-04-04

参考技术A

1、 [class~=flower]
选择 title 属性包含单词 "flower" 的所有元素。
2、 [class|=box]
选择 lang 属性值以 "box" 开头的所有元素。
3、 :focus
选择获得焦点的 input 元素。
4、 p::first-letter
选择每个 <p> 元素的首字母。
5、 p:first-child
选择属于父元素的第一个子元素的每个 <p> 元素。
6、 ::after ---- ::before
在每个 <p> 元素的内容之前插入内容。-----在每个 <p> 元素的内容之后插入内容。
7、 a[class^=red]
选择其 class 属性值以 "red" 开头的每个 <a> 元素。
8、.box2 [class$=red]
选择其 class 属性以 "red" 结尾的所有 .box 2元素。
9、 a[src*="abc"]
选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。
10、.box3 h1:first-of-type
11、 tr:nth-child(2n+1)
选择属于其父元素的基数子元素的每个 <p> 元素。
12、 :disabled
选择每个禁用的 <input> 元素

chrome/safari : -webkit-
FF: -moz-
ie: -ms-
Opera: -o-
!!!!!!如何处理私有前缀：autoprefixer插件

1、 使用图标字体的原理
（1） 引入字体文件 *.ttf或其它
（2）在html文件中：定义字体
@font-face
font-family: \'mzd\';
src:\'字体文件的地址\'

(3)使用字体
.box
font-family: \'mzd\'

2、使用时的两种方案
（1）阿里巴巴图标字体
（2）font-awesome: 图标字体库

1、animation动画的使用方法
（1）先定义动画规则

（2）使用动画规则

2、animation的属性

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提高页面滚动、动画等渲染性能。