Repository navigation
[css] 第2天 CSS3有哪些新增的特性？ #5
Description
Activity
边框圆角
- border-radius
盒子阴影
- box-shadow
文字阴影
- text-shadow
2d、3d变换
- transform
- rotate()
- scale()
- skew()
- translate()
过度动画
- transition
自定义动画
- animation
(只记得这些了)
Reacted by Wutongjiaojiajia, shandamengcheng, 万奕舟, hzwang, wrl-hashing0508, Jay Yoon, 繁花落叶已成霜, mozhixiang and PremierLao- 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
- 倒影的样式是哪个来着？！
边框(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
Reacted by douxiaohou, abin, tagore-cai, 围巾落地冻成狗, Huang Shuling, Goo24, 袁毅伟, 18245041031, Old won, kokokele and 92 moreReacted by Chen Rui qiang, emlia, nanyouyangyong, xuxihua, Promise, Leon, jsjtwsh, charlotte, MarronBan, p992202933 and 1 more🙃 太多了，面试的时候应该不会问这种吧。。。
我觉得可能会问你知道哪些CSS4的feature吗，emm这个可能比较有意义 🤔
Reacted by fantasyhu, Spring, mmaijj, hxy, LeeSin-picker, charlotte, hooer, pujx233, usernameisregistered and dragon-singmask-image
transfrom translate 旋转 2d转换属性 圆角属性 阴影 旋转 平移 动画
增加了变量支持
圆角：
border-radius
盒子阴影：
box-shadow
文字阴影：
text-shadow
2d，3d转换：
transform
动画：
Keyframes规则
盒子模型：
display:flex
媒体查询：
meta圆角
border-radius
文字阴影
text-shadow
盒子阴影
box-shadow
盒边框模型
box-sizing
媒体查询
@media
过渡
transition
动画
@Keyframes
animation补充新增css3伪类
:after 在元素之前添加内容，也可以用来做清除浮动。
:before 在元素之后添加内容。
:enabled 选择可用的表单元素。
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。边框圆角：border-radius
盒子阴影：box-shadow
背景定位：background-origin
背景尺寸：background-size
渐变：
linear-gradient 线性渐变
radial-gradient 径向渐变
2d、3d变换：
transform
rotate()
scale()
skew()
translate()
css3动画：@Keyframes
过度动画：transition
自定义动画：animation
弹性布局：flex
多媒体查询：@mediaCSS新特性
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
22 remaining items
- 这是一封自动回复邮件。已经收到您的来信，我会尽快查看。
1.盒子圆角
2.盒子阴影，文字阴影
3.2d，3d变换
4.动画
5.媒体查询
6.弹性盒子- 这是一封自动回复邮件。已经收到您的来信，我会尽快查看。
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径向渐变- 这是一封自动回复邮件。已经收到您的来信，我会尽快查看。
盒子模型
弹性布局
字体图标
线性渐变- 这是一封自动回复邮件。已经收到您的来信，我会尽快查看。
- 这是一封自动回复邮件。已经收到您的来信，我会尽快查看。
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应用和新的用户需求。伪元素选择器：::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
媒体查询- 这是一封自动回复邮件。已经收到您的来信，我会尽快查看。
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应用和新的用户需求。- 这是一封自动回复邮件。已经收到您的来信，我会尽快查看。
盒子模型
弹性布局
字体图标
线性渐变
简述下CSS3有哪些新增的特性？如：
圆角：border-radius: 3px