前端 CSS3的新特性

css3的新特性如下：

1.新增了更加实用的选择器，例如：动态伪类选择器，目标伪类选择器，伪元素选择器等等。 2.新增了更好的视觉效果，例如：圆角，阴影，渐变等。 3.新增了丰富的背景效果，例如：支持多个图片背景，同时新增了若干个背景元素的属性。 4.新增了全新的布局方案—弹性盒子。 5.新增了web字体，可以显示用户电脑上没有安装的字体 6.增强了颜色，例如：HSL，HSLA，RGBA几种新的颜色模式，新增opacity属性来控制透明度。 7.增加了2D和3D变换，例如：旋转，扭曲，缩放，位移等。 8.增加动画和过渡效果，让效果的变换更具流线性，平滑性。 。。。。等等

css3私有前缀

查询css3兼容性的网站：https://caniuse.com/ 常见浏览器私有前缀 Chrome 浏览器 -webkit- Safari 浏览器 -webkit- Firefox 浏览器 -moz- Edge 浏览器 -webkit- 旧 Opera 浏览器 -o- 旧 IE 浏览器 -ms-

注意：我们在编码时，不用过于关注浏览器私有前缀，不用绞尽脑汁的去记忆，也不用每个都去查询，因为常用的css3新特性，主流浏览器都是支持的，即便是为了老浏览器而加前缀，我们也可以借助现代的构建工具比如：webpack，去帮我们添加私有前缀。

css3新增长度单位

1.rem根元素字体大小的倍数，只与根元素字体大小有关。 2.vw视口宽度的百分之多少 10vw 就是视口宽度的10% 3.vh视口高度的百分之多少 10vh就是视口高度的10% 4.vmax视口宽高中大的那个的百分之多少。（了解即可） 5.vmin视口宽高中小的那个的百分之多少。（了解即可）

新增盒子属性 border-box

resize(了解) box-shadow 盒子阴影 （写4个值的比较常用） opacity 不透明度（0~1）

opacity与rgba（区别） opacity是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。 rgba是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

新增背景属性 background-origin

设置背景图的原点

background-clip 对背景图进行修剪

background-size 背景大小

background复合属性

多背景图background

边框圆角border

边框外轮廓outline

文本阴影text-shadow

文本换行white-space

文本溢出text-overflow

文本修饰text-decoration

文本描边text-stroke

新增渐变

线性渐变 linear-gradient 文字渐变

径向渐变radial-gradient

重复渐变 repeating-xxx-gradient

在没有发生渐变的区域，重新开始渐变，就是重复渐变

web字体 font-family

https://www.iconfont.cn/webfont#!/webfont/index 阿里定制字体 体积小 本地下载 引入所有解压的文件 不包括html文件 https://www.iconfont.cn/ 可以定制图片图标 把需要的图标下载本地 有说明html文件文档 按步骤操作就可以

2d变换 transform

translate 位移 1.位移与相对定位很相似，都不脱离文档流，不会影响到其他元素 2.与相对定位的区别：相对定位的百分值，参考的是其父元素，定位的百分比值，参考的是其自身 3.浏览器针对位移有优先，与定位相比，浏览器处理位移的效率更高 4.位移对行内元素无效 5.位移配合定位，可实现元素水平垂直居中

缩放 scale

旋转 rotate

扭曲（了解）skew

多重变换 注意:多重变换时，建议最后旋转

变换原点 transform-origin

如果只提供一个值，若是像素值，表示横坐标，纵坐标取50%。若是关键词，则另一个坐标取50%

3D变换

1.开启3D空间 transform-style 重要原则：元素进行3D变换的首要操作：父元素必须开启3D空间 2.设置景深 perspective 何为景深：指定观察者与z=0平面的距离，能让发生3D变换的元素，产生透视效果，看起来更加立体

透视点的位置 perspective-origin

所谓透视点位置，就是观察者位置，默认的透视点在元素的中心， 注意：通常情况下，我们不需要跳转透视点位置

位移 translate3d

旋转 rotate3d

缩放 scale3d

多重变换 注意点：多重变换时，建议最后旋转

背部可见性 backface-visibility

过渡 transition

不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡， 常见的支持过渡的属性有：颜色，长度值，百分比，z-index, opacity , 2D变换属性，3D变换属性，阴影。 过渡属性建议 放在容器身上 不要放在 :hover 身上 过渡需要触发条件

高级使用—— 贝塞尔曲线

过渡 https://cubic-bezier.com/

复合属性

动画

不需要触发条件 第一步：定义关键帧（定义动画） @keyframes 动画名 第二步：给元素应用动画，用到的属性如下： animation-name:给元素指定具体的动画（具体的关键帧） animation-duration:设置动画所需时间 animation-delay:设置动画延迟

其他属性 暂停 动作往往写在一个动作里面比如 :hover

动画的复合属性

只设置一个时间表示duration,设置两个时间分别是：duration和delay,其他属性没有数量和顺序要求 备注：animation-play-state 一般单独使用。

动画与过渡的区别

最主要的区别就是： 1.动画不需要任何的触发条件，而过渡必须得有触发条件 2.动画从开始到结束的整个过程当中，都可以通过关键帧，去进行精细的设置。 而过渡确不能，只关注始末，从开始到结束的变化过程中，是不可操作的。

图片动画

注意事项： 1.需要有一个像样的图 2.算好位置以及它走多少步数

多列布局 column

多列图片 作用：专门用于实现类似于报纸的布局

伸缩容器（弹性盒子） display:flex

伸缩项目：伸缩容器所有 子元素 自动成为了：伸缩项目。

主轴方向 flex-direction

主轴换行方式 flex-wrap

主轴对齐方式 justify-content

侧轴对齐方式__一行 align-items

侧轴对齐方式__多行 align-content

项目在主轴的基准长度 flex-basis

伸缩项目__伸 flex-grow

伸缩项目__缩 flex-shrink

复合属性 flex

项目排序与单独对齐 order align-self

响应式布局

媒体查询__媒体特性 @media

媒体查询__媒体类型

媒体查询__运算符

媒体查询__常用阈值

精彩内容

 您阅读本篇文章共花了：