[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-device�width: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

过度

动画

[xyydd]

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

[2420687171]

1. 边框(borders):
   border-radius 圆角
   box-shadow 盒阴影
   border-image 边框图像

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

3. 渐变：
   linear-gradient 线性渐变
   radial-gradient 径向渐变

4. 文本效果;
   word-break
   word-wrap
   text-overflow
   text-shadow
   text-wrap
   text-outline
   text-justify

5. 转换：
   2D转换属性
   transform
   transform-origin
   2D转换方法
   translate(x,y)
   translateX(n)
   translateY(n)
   rotate(angle)
   scale(n)
   scaleX(n)
   scaleY(n)
   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)

6. 过渡
   transition

7. 动画
   @Keyframes规则
   animation

8. 弹性盒子(flexbox)

9. 多媒体查询@media

[xyydd]

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

[WangXi01]

1. 圆角 border-radius
2. 盒子阴影box-shaow
3. 转换 transform
4. 过渡 transition
5. 背景 background
6. 动画 animation

[superyeda]

边框圆角:border-radius,盒子阴影:box-shadow,文字阴影:text-shadow,2d-3d变换:transform rotate() scale() skew() translate(),过渡动画:transition,自定义动画:animation

[xyydd]

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

[wl2282589971]

1.盒子圆角
2.盒子阴影，文字阴影
3.2d，3d变换
4.动画
5.媒体查询
6.弹性盒子

[xyydd]

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

[Iambecauseyouare]

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过渡
transform转换
animation动画
linear-gradient线性渐变
radial-gradient径向渐变

[xyydd]

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

[WangLiqing0713]

盒子模型
弹性布局
字体图标
线性渐变

[xyydd]

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

[keenesun]

#1 选择器
#2 变形
#3 过渡和动画
#4 布局：多列、弹性、grid
#5 样式：字体、阴影、颜色、背景、边框
#6 媒体查询

[xyydd]

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

[lili-0923]

1、选择器：
属性选择器：选择具有特定属性的元素，例如 [attr=value]。
伪类选择器：为特定状态的元素添加样式，例如 :hover、:active、:visited。
伪元素选择器：选择特定部分的元素，例如 ::before、::after。
多重选择器：使用逗号分隔来同时选择多个元素，例如 element1, element2。

2、盒模型：Box-sizing 属性改变了默认的 CSS 盒模型，使其更容易进行布局。

3、颜色：
CSS3 增加了对透明度的支持，使用 rgba()、hsla() 或 opacity 来设置。
CSS3 提供了新的颜色空间，如 RGBA、HSL 和 HSLA。

4、背景：
background-size：允许您更改背景图像的大小。
background-repeat：使您能够更改背景图像的重复行为。
background-position：允许您在水平和垂直方向上移动背景图像。
background-image：允许多背景图像同时使用。

5、边框和阴影：
border-radius：为边框添加圆角。
box-shadow：为元素添加阴影效果。

6、文字效果：
text-shadow：为文本添加阴影效果。
text-overflow：处理溢出文本的显示方式。

7、布局和流式布局：
Flexbox：用于一维布局的 CSS3 新布局模型。
Grid：用于二维布局的 CSS3 新布局模型。

8、多列布局（Multi-column Layout）：CSS3 提供了一种创建多列文本或布局的方法，类似于报纸的排版。

9、动画和过渡（Animations and Transitions）：CSS3 支持关键帧动画和过渡效果，用于在 CSS 中创建动态效果。动画可以通过 transition 和 animation 属性进行控制。

10、响应式设计（Responsive Design）：CSS3 提供了一些特性，如媒体查询（Media Queries），允许开发人员创建在不同设备和屏幕尺寸上都能良好显示的响应式网页设计。

11、其他特性：
CSS3 增加了对 SVG 图像的支持。
CSS3 提供了一种新的方式来定义字体（@font-face）。
CSS3 支持自定义的伪元素（例如，::before 和 ::after）。
CSS3 支持更复杂的 CSS 选择器，如子选择器（child selectors）、相邻同胞选择器（adjacent sibling selectors）等。
CSS3 支持轮廓（outline）和内轮廓（outline-offset）属性，它们在突出显示元素时非常有用。
CSS3 支持线性渐变（linear gradients）和径向渐变（radial gradients）。
CSS3 支持在页面上直接绘制图形，如矩形、圆形、椭圆等，这是通过使用 canvas 元素和 JavaScript 来实现的。
CSS3 支持生成字体的复杂样式，包括字体装饰（font decorations）如上标（superscript）、下标（subscript）等。
在HTML5中新出现的属性在CSS3中也被支持，如 video, audio, placeholder, input-type-radio, input-type-checkbox, input-type-number, input-type-range, input-type-date, input-type-time, input-type-datetime, input-type-month, input-type-week, input-type-email, input-type-search, input-type-tel, input-type-color, progress, meter, fieldset, output, keygen, datalist, command, map, area, track, wbr 等。这些新属性使HTML5能够更好地支持新的Web应用和新的用户需求。

[pengsir120]

伪元素选择器：::after
圆角：border-radius
阴影、渐变
丰富的背景效果，例如：支持多个图片背景，同时新增了若干个背景元素的属性
弹性盒子：flex
透明度：opacity
增强了颜色：例如hsl，hsla，rgba几种新的颜色模式
增加了2D和3D变换，旋转、扭曲、缩放、位移等
增加了动画和过渡效果
增加了浏览器私有前缀
新增长度单位：rem、vw、vh、vmax、vmin
新增盒子属性：border-box
盒子阴影：box-shadow
文本换行：white-space
文本溢出：text-overflow
文本阴影：text-shadow
文本修饰：text-decoration
媒体查询

[xyydd]

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

[xiaotangaichihuluobo]

1、选择器：
属性选择器：选择具有特定属性的元素，例如 [attr=value]。
伪类选择器：为特定状态的元素添加样式，例如 :hover、:active、:visited。
伪元素选择器：选择特定部分的元素，例如 ::before、::after。
多重选择器：使用逗号分隔来同时选择多个元素，例如 element1, element2。

2、盒模型：Box-sizing 属性改变了默认的 CSS 盒模型，使其更容易进行布局。

3、颜色：
CSS3 增加了对透明度的支持，使用 rgba()、hsla() 或 opacity 来设置。
CSS3 提供了新的颜色空间，如 RGBA、HSL 和 HSLA。

4、背景：
background-size：允许您更改背景图像的大小。
background-repeat：使您能够更改背景图像的重复行为。
background-position：允许您在水平和垂直方向上移动背景图像。
background-image：允许多背景图像同时使用。

5、边框和阴影：
border-radius：为边框添加圆角。
box-shadow：为元素添加阴影效果。

6、文字效果：
text-shadow：为文本添加阴影效果。
text-overflow：处理溢出文本的显示方式。

7、布局和流式布局：
Flexbox：用于一维布局的 CSS3 新布局模型。
Grid：用于二维布局的 CSS3 新布局模型。

8、多列布局（Multi-column Layout）：CSS3 提供了一种创建多列文本或布局的方法，类似于报纸的排版。

9、动画和过渡（Animations and Transitions）：CSS3 支持关键帧动画和过渡效果，用于在 CSS 中创建动态效果。动画可以通过 transition 和 animation 属性进行控制。

10、响应式设计（Responsive Design）：CSS3 提供了一些特性，如媒体查询（Media Queries），允许开发人员创建在不同设备和屏幕尺寸上都能良好显示的响应式网页设计。

11、其他特性：
CSS3 增加了对 SVG 图像的支持。
CSS3 提供了一种新的方式来定义字体（@font-face）。
CSS3 支持自定义的伪元素（例如，::before 和 ::after）。
CSS3 支持更复杂的 CSS 选择器，如子选择器（child selectors）、相邻同胞选择器（adjacent sibling selectors）等。
CSS3 支持轮廓（outline）和内轮廓（outline-offset）属性，它们在突出显示元素时非常有用。
CSS3 支持线性渐变（linear gradients）和径向渐变（radial gradients）。
CSS3 支持在页面上直接绘制图形，如矩形、圆形、椭圆等，这是通过使用 canvas 元素和 JavaScript 来实现的。
CSS3 支持生成字体的复杂样式，包括字体装饰（font decorations）如上标（superscript）、下标（subscript）等。
在HTML5中新出现的属性在CSS3中也被支持，如 video, audio, placeholder, input-type-radio, input-type-checkbox, input-type-number, input-type-range, input-type-date, input-type-time, input-type-datetime, input-type-month, input-type-week, input-type-email, input-type-search, input-type-tel, input-type-color, progress, meter, fieldset, output, keygen, datalist, command, map, area, track, wbr 等。这些新属性使HTML5能够更好地支持新的Web应用和新的用户需求。

[xyydd]

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

[xiaotangaichihuluobo]

盒子模型
弹性布局
字体图标
线性渐变