[css] 第2天 CSS3有哪些新增的特性？

[haizhilin2013]

简述下CSS3有哪些新增的特性？如：
圆角：border-radius: 3px

[yxkhaha]

边框圆角

• border-radius

盒子阴影

• box-shadow

文字阴影

• text-shadow

2d、3d变换

• transform

1. rotate()
2. scale()
3. skew()
4. translate()

过度动画

• transition

自定义动画

• animation

(只记得这些了)

[undefinedYu]

• transform
• animation
• transition
• pointer-events
• box-sizing
• background-size cover/can...
• filter
• outline
• background-image: 颜色渐变。。。
• opacity
• content
• text-shadow
• border-shadow
• text-overflow
• white-space
• border-radius
• 倒影的样式是哪个来着？！

[qingleizhang123]

边框(borders):

• border-radius 圆角
• box-shadow 盒阴影
• border-image 边框图像

背景:

• background-size 背景图片的尺寸
• background_origin 背景图片的定位区域
• background-clip 背景图片的绘制区域

渐变：

• linear-gradient 线性渐变
• radial-gradient 径向渐变

文本效果;

• word-break
• word-wrap
• text-overflow
• text-shadow
• text-wrap
• text-outline
• text-justify

转换：

• 2D转换属性
• transform
• transform-origin
• 2D转换方法
• translate(x,y)
• translateX(n)
• translateY(n)
• rotate(angle)
• scale(n)
• scaleX(n)
• scaleY(n)
• rotate(angle)
• matrix(n,n,n,n,n,n)

3D转换：

*3D转换属性：

• transform
• transform-origin
• transform-style
• 3D转换方法
• translate3d(x,y,z)
• translateX(x)
• translateY(y)
• translateZ(z)
• scale3d(x,y,z)
• scaleX(x)
• scaleY(y)
• scaleZ(z)
• rotate3d(x,y,z,angle)
• rotateX(x)
• rotateY(y)
• rotateZ(z)
• perspective(n)

过渡

• transition

动画

• @Keyframes规则
• animation

弹性盒子(flexbox)

多媒体查询@media

[tzjoke]

🙃 太多了，面试的时候应该不会问这种吧。。。

[tzjoke]

我觉得可能会问你知道哪些CSS4的feature吗，emm这个可能比较有意义 🤔

[tiyunchen]

mask-image

[15190408121]

transfrom translate 旋转 2d转换属性 圆角属性 阴影 旋转 平移 动画

[DarthVaderrr]

增加了变量支持

[qp97vi]

圆角：
border-radius
盒子阴影：
box-shadow
文字阴影：
text-shadow
2d，3d转换：
transform
动画：
Keyframes规则
盒子模型：
display:flex
媒体查询：
meta

[Toeat]

圆角
border-radius
文字阴影
text-shadow
盒子阴影
box-shadow
盒边框模型
box-sizing
媒体查询
@media
过渡
transition
动画
@Keyframes
animation

[RQSA]

补充新增css3伪类
:after 在元素之前添加内容，也可以用来做清除浮动。
:before 在元素之后添加内容。
:enabled 选择可用的表单元素。
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

[giggleCYT]

边框圆角：border-radius
盒子阴影：box-shadow
背景定位：background-origin
背景尺寸：background-size
渐变：
linear-gradient 线性渐变
radial-gradient 径向渐变
2d、3d变换：
transform
rotate()
scale()
skew()
translate()
css3动画：@Keyframes
过度动画：transition
自定义动画：animation
弹性布局：flex
多媒体查询：@media