haizhilin2013 commented 5 years ago

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

yxkhaha commented 5 years ago

边框圆角

border-radius
盒子阴影
box-shadow
文字阴影
text-shadow
2d、3d变换
transform
1. rotate()
2. scale()
3. skew()
4. translate()
  过度动画
transition
自定义动画
animation
(只记得这些了)

undefinedYu commented 5 years ago

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 commented 5 years ago

边框(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 commented 5 years ago

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

tzjoke commented 5 years ago

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

tiyunchen commented 5 years ago

mask-image

15190408121 commented 5 years ago

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

DarthVaderrr commented 5 years ago

增加了变量支持

qp97vi commented 5 years ago

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

Toeat commented 5 years ago

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

RQSA commented 4 years ago

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

giggleCYT commented 4 years ago

边框圆角：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 commented 4 years ago

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 commented 3 years ago

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

inksnowhailong commented 3 years ago

边框(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 commented 3 years ago

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

xinjinze1206 commented 3 years ago

边框圆角：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 commented 3 years ago

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

HNHED commented 2 years ago

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

amikly commented 2 years ago

@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 commented 2 years ago

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

tk12138 commented 2 years ago

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

tk12138 commented 2 years ago

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

baiye0 commented 2 years ago

占位

xyydd commented 2 years ago

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

syfine commented 2 years ago

边框

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 commented 2 years ago

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

xiaoxiaozhiya commented 2 years ago

颜色

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 commented 2 years ago

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

www-wanglong commented 2 years ago

边框

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 commented 2 years ago

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

2420687171 commented 2 years ago

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

xyydd commented 2 years ago

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

WangXi01 commented 2 years ago

圆角 border-radius
盒子阴影box-shaow
转换 transform
过渡 transition
背景 background
动画 animation

superyeda commented 2 years ago

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

xyydd commented 2 years ago

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

wl2282589971 commented 1 year ago

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

xyydd commented 1 year ago

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

Iambecauseyouare commented 1 year ago

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 commented 1 year ago

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

WangLiqing0713 commented 1 year ago

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

xyydd commented 1 year ago

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

keenesun commented 11 months ago

1 选择器

2 变形

3 过渡和动画

4 布局：多列、弹性、grid

5 样式：字体、阴影、颜色、背景、边框

6 媒体查询

xyydd commented 11 months ago

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

lili-0923 commented 7 months ago

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 commented 2 weeks ago

伪元素选择器：::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 commented 2 weeks ago

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

haizlin / fe-interview

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

边框圆角

盒子阴影

文字阴影

2d、3d变换

过度动画

自定义动画

(只记得这些了)

边框(borders):

背景:

渐变：

文本效果;

转换：

3D转换：

过渡

动画

弹性盒子(flexbox)

多媒体查询@media

CSS新特性

transition过渡

animation动画

transform形状转换

新选择器

box-shadow阴影

边框

1. border-image边框图片

2. border-radius边框圆角

背景

1. background-clip背景绘制区域

2. background-origin

3. background-size背景的大小

4. 多张背景图

反射（倒影）

文字

1.换行

2. 超出省略号

3. 多行超出省略号

4. text-shadow文字阴影

颜色

渐变

filter滤镜

布局

1. flex弹性布局

2. grid栅格布局

3. column-count多列布局

box-sizing盒模型定义

@media媒体查询

混合模式

mark

@font-face 规则

overflow-wrap属性

text-decoration属性

CSS的多列布局

边框和颜色

CSS3的渐变效果

CSS3的阴影和反射效果

CSS3的背景效果

CSS3的盒子模型

CSS3 的 Transitions, Transforms 和 Animation

Transitions

Transforms

Animation

边框

背景

文字

颜色

transition

transform

animation

渐变

其他

颜色

盒子模型

属性选择器

伪元素选择器

媒体查询

定位

弹性布局

边框有关的