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

[haizhilin2013]

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

[yxkhaha]

边框圆角

• border-radius

  盒子阴影

• box-shadow

  文字阴影

• text-shadow

  2d、3d变换

• transform

• rotate()
• scale()
• skew()

• 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

[xyydd]

CSS新特性

transition过渡

animation动画

transform形状转换

新选择器

box-shadow阴影

边框

1. border-image边框图片

2. border-radius边框圆角

背景

1. background-clip背景绘制区域

2. background-origin

指定background-origin的相对位置

3. background-size背景的大小

4. 多张背景图

background:url('test.jpg') no-repeat left,url(logo.png) no-repeat right;

反射（倒影）

-webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片

文字

1.换行

word-break: normal|break-all|keep-all;

2. 超出省略号

text-overflow:ellipsis;

3. 多行超出省略号

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

4. text-shadow文字阴影

颜色

rgba、hsla

渐变

线性渐变，径向渐变，圆锥渐变

filter滤镜

布局

1. flex弹性布局

2. grid栅格布局

3. column-count多列布局

box-sizing盒模型定义

@media媒体查询

混合模式

background-blend-mode、mix-blend-mode

mark