[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

[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

[houshaoxuan]

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

[inksnowhailong]

边框(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

[mono2048]

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

[xinjinze1206]

边框圆角：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

[fluencySing]

边框圆角
盒子阴影
渐变背景
2d 3d转换
过渡
动画
媒体查询
flex布局

[HNHED]

边框 背景 渐变 文本效果 转换 过渡 动画 弹性盒子 多媒体查询

[amikly]

@font-face 规则

指定一个用于显示文本的自定义字体，字体能从远程服务器或者用户本地安装的字体加载

overflow-wrap属性

用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行

text-decoration属性

用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线 或 闪烁）

css3中转换为简写属性。支持 text-decoration-style 值

CSS的多列布局

一种定义了多栏布局的模块，可支持在布局中建立列（column）的数量，以及内容如何在列之间流动（flow）、列之间的间距（gap）大小，以及列的分隔线（column rules）

• Column-count：元素的列数，表示布局几列。
• Column-rule：规定了列与列之间的直线，表示列与列之间的间隔条的样式
• Column-gap：设置元素列之间的间隔大小，表示列于列之间的间隔

边框和颜色

支持 rgba 和 hsl 表示颜色, 支持圆角，阴影等效果

CSS3的渐变效果

支持线性渐变和径向渐变

CSS3的阴影和反射效果

阴影效果既可用于普通元素，也可用于文字

CSS3的背景效果

• “Background Clip”，该属确定背景画区
• “Background Origin”，用于确定背景的位置，它通常与 background-position 联合使用，可以从 border、padding、content 来计算 background-position（就像 background-clip）。
• “Background Size”，常用来调整背景图片的大小，注意别和 clip 弄混，这个主要用于设定图片本身。
• “Background Break”属性，CSS3 中，元素可以被分成几个独立的盒子（如使内联元素 span 跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。
• 多背景图片支持

CSS3的盒子模型

display: -webkit-box; 
display: -moz-box; 
-webkit-box-orient: horizontal; 
-moz-box-orient: horizontal;

“display: -webkit-box; display: -moz-box;”，它针对 webkit 和 gecko 浏览器定义了该元素的盒子模型

注意这里的“-webkit-box-orient: horizontal;”，它表示水平排列的盒子模型

如果配合元素的 box-flex 属性：

.flex { 
     -webkit-box-flex: 1; 
     -moz-box-flex: 1; 
 } 
 .flex2 { 
     -webkit-box-flex: 2; 
     -moz-box-flex: 2; 
 }

水平方向设下的宽度，就可以按照1:2的比例关系自动去计算了。

CSS3 的 Transitions, Transforms 和 Animation

Transitions

• transition-property：用于指定过渡的性质，比如 transition-property:backgrond 就是指 backgound 参与这个过渡
• transition-duration：用于指定这个过渡的持续时间
• transition-delay：用于制定延迟过渡的时间
• transition-timing-function：用于指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

Transforms

指拉伸，压缩，旋转，偏移等等一些图形学里面的基本变换

Animation

@-webkit-keyframes anim1 { 
    0% { 
        Opacity: 0; 
 Font-size: 12px; 
    } 
    100% { 
        Opacity: 1; 
 Font-size: 24px; 
    } 
 } 
 .anim1Div { 
    -webkit-animation-name: anim1 ; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: 4; 
    -webkit-animation-direction: alternate; 
    -webkit-animation-timing-function: ease-in-out; 
 }

[nizuzong]

transform、box-shadow、animation、linear-gradient、border-radius、background-clip、background-size、background-origin

[tk12138]

①　颜色：新增RGBA,HSLA模式 ②　文字阴影：text-shadow ③　边框：圆角（border-radius）,边框阴影：box-shadow ④　盒子模型：box-sizing ⑤　过渡：transition,可实现动画 ⑥　自定义动画 ⑦　媒体查询，多栏布局 ⑧　2D转换，3D转换 ⑨　新增选择器：属性选择器，伪类选择器，伪元素选择器

[tk12138]

①　颜色：新增RGBA,HSLA模式 ②　文字阴影：text-shadow ③　边框：圆角（border-radius）,边框阴影：box-shadow ④　盒子模型：box-sizing ⑤　过渡：transition,可实现动画 ⑥　自定义动画 ⑦　媒体查询，多栏布局 ⑧　2D转换，3D转换 ⑨　新增选择器：属性选择器，伪类选择器，伪元素选择器

[baiye0]

占位

[xyydd]

这是一封自动回复邮件。已经收到您的来信，我会尽快查看。

[syfine]

边框

• border-radius : 创建圆角边框
• box-shadow : 为元素添加阴影
• border-image ： 使用图片来绘制边框

背景

• background-clip
• background-origin
• background-size
• background-break

文字

• word-wrap
• text-overflow
• text-shadow
• text-decoration

颜色

• rgba
• hsla

transition

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

transform

transform属性允许你旋转，缩放，倾斜或平移给定元素

animation

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• amination-iteration-count
• animation-direction
• animation-paly-state
• animation-fill-mode

渐变

• linear-gradient

background-image:linear-gradient(direction,color-stop1,color-stop2,...);

• radial-gradient

linear-gradient(0deg, red, green);

其他

flex弹性布局，Grid栅格布局

[xyydd]

这是一封自动回复邮件。已经收到您的来信，我会尽快查看。

[xiaoxiaozhiya]

颜色

• RGBA,HSLB

盒子模型

• box-sizing : content-box | border-box

属性选择器

• img[alt]{......},可以设置新属性，也可以给新的属性设置更多的样式

伪元素选择器

• ul li:nth-child(1) ul下的第一个孩子li

媒体查询

<link rel="stylesheet" media="screen and (max-devicewidth:400px)" href="tinyScreen.css" />

定位

• gelocation

弹性布局

• display:flex

边框有关的

• border-radius
• box-shadow
• text-shadow

动画

过渡

• transition

[xyydd]

这是一封自动回复邮件。已经收到您的来信，我会尽快查看。

[www-wanglong]

边框

• border-radius： 边框圆角
• border-image 边框图像

背景

• background-size
• background-origin
• background-clip

颜色

rgba(233,0,0,0.2) RGBA实际上是RGB颜色的扩展，可以规定颜色不透明度

渐变

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

阴影

• text-shadow 文本阴影
• box-shadow 盒阴影

文本效果

• text-overflow 文字溢出
• word-wrap 字换行
• word-break 字换行规则

转换

2d

transform

3d

过度

动画