1,CSS3新特性
- 圆角(border-radius)
- 阴影(box-shadow)
- 对文字加特效(text-shadow)
- 线性渐变(gradient)
- 变换(transform):rotate,scale,translate,skew//旋转,缩放,定位,倾斜
- 更多的CSS选择器:多背景设置,色彩模式如RGBA,伪元素::selection,媒体查询,多栏布局,图片边框
2,CSS3新增的伪类有哪些
p:first-of-type | 其父元素首个p元素的每个p元素 |
p:last-of-type | 其父元素的最后一个p的每个p元素 |
p:only-of-type | 其父元素唯一一个p的每个元素 |
p:nth-child(2) | 其父元素的第2个资源色的每个P元素 |
p:only-child | 其父元素唯一一个子元素的每个p元素 |
:enable:disable | 表单控件的禁用状态 |
:checked | 单选框或复选框被选中 |
3,box-sizing属性
控制元素盒模型的解析模式
默认值:content-box,让元素维持W3C标准盒模型,元素的宽度和高度使用border+padding+content的宽度决定,设置height、width指的是content部分的高度和宽度;
而border-box让元素维持传统IE盒模型,height和width指的是border+padding+content的宽度和高度;
标准浏览器下,利用w3c规范解析盒模型,一旦修改元素边框和内距就会影响元素的盒子大小,就不得不重新计算,从而影响页面的布局;
4,CSS3动画的优点和缺点
优点:在性能上好一点,浏览器对CSS3的动画做一些优化;
代码相对简单;
缺点:动画控制上不够灵活,兼容性不好,部分动画功能无法实现
5,animation和transition异同
功能相同,都是通过改变元素的属性值来实现动画效果;
区别在于transition只能指定属性的开始值和结束值,在两个属性间使用平滑过渡的方式实现动画效果;而animation通过定义多个关键帧,以及定义每个关键帧中的元素属性,实现更为复杂的动画效果;
animation属性值有:
必要属性2个:
animation-name、animation-duration
其他属性:animation-play-state,播放状态
animation-timing-function,动画运动形式
animation-delay,动画延迟时间
animation-iteration-count,动画重复次数
animation-direction,播放前重置
6,媒体查询
@media 媒体类型 + 媒体特性{样式规则}
这通常在移动端使用,适用多屏幕,使用rem单位,根据屏幕尺寸动态地改变根节点HTML的font-size。
缺点是适配的屏幕尺寸不连续,会在CSS加入大量查询代码增加CSS大小。改进方法:使用JS获取设备屏幕宽度,根据设计稿原型尺码,动态的计算font-size的值。
px和em都是长度单位,但是px的大小是固定的,计算比较容易,而em的值是相对于容器字体的大小,并且继承父元素字体大小。
浏览器默认字体16px,一般1em=16px;
rem是相对于根元素通常是HTML元素的大小。
7,CSS3文本阴影
text-shadow{水平阴影,垂直阴影,模糊距离,阴影颜色}
盒阴影比其多了一个外延值,inset
8,如何把元素从左侧移动50px,从顶端移动100px--translate
h1{
text-shadow: 10px 2px 2px pink;
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);
-webkit-transform:translate(50px,100px);
-o-transform: translate(50px,100px);
-moz-transform: translate(50px,100px);
}
注意考虑浏览器兼容性,从上到下分别是IE9-ms,Safari和Chrome的webkit,opera的-o-,Firefox的-moz
9, 如何把一个元素旋转30度--rotate 30deg//matrix
https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/
关于transform的一些属性可以看看
10,淡入淡出动画效果
定义动画关键帧,然后在元素CSS中animation-name=该关键帧名称
11,为盒子添加蒙版
-mask:mask-image,mask-position,mask-repeat
即url(), 50%, 50%, 1
12,背景颜色线性渐变
background:-webkit-linear-gradient(left,red,green 50%,blue)
13,设置CSS3倒影
background:-webkit-box-reflect:方向(below,above,left,right),距离
14,transition
简写属性,用于设置以下4个过渡 属性:
transition-property:哪个属性
transition-duration:过渡时间
transition-timing-function:速度效果的运动曲线=linear,ease,ease-in,ease-out,ease-in-out,cube-bezier
transition-delay:过渡开始前的延迟时间
15,background-clip和background-origin
clip规定背景(背景颜色加图片)的绘制区域,三个属性:
border-box:从边框开始绘制
padding-box:从边框内部开始绘制
content-box:从内容部分开始绘制
16,把文本分隔成4列,并使两列之间间隔30px
column-count:3
column-gap:30px
17,如何用省略号显示超文本内容
text-overflow:ellopsis;
18,文本换行
word-wrap
normal,只允许在断点字换行
break-word,在长单词或者URL地址内部进行换行