【Web前端基础】css3新特性有什么_CSS3

7条回答

小猪仔

2楼 · 2020-10-19 15:23

CSS3实现圆角 (border-radius: 8px)

阴影 (box-shadow: 10px)

对文字加特效 (text-shadow)

线性渐变（gradient）

旋转（transform)：rotate(9deg)

缩放 (transform)：scale(0.85，0.90)

倾斜（transform)：skew（-9deg，0deg）

过渡效果（transition)

动画效果（animation)

增加了更多的选择器

水默

3楼 · 2020-10-19 15:47

第 1 选择器

第 2 RGBA和透明度

第 3 多栏布局

第 4 多背景图

第 5 Word Wrap

第 6 文字阴影

第 7 @font-face属性

第 8 圆角(边框半径)

第 9 边框图片

第 10 盒阴影

第 11 盒子大小

第 12 媒体查询

第 13 语音

chai - 嘿咻嘿咻~

4楼 · 2020-10-19 19:26

CSS3选择器

CSS3 边框（Borders）

属性	说明	CSS
border-image	设置所有边框图像的速记属性。	3
border-radius	一个用于设置所有四个边框- *-半径属性的速记属性	3
box-shadow	附加一个或多个下拉框的阴影	3

CSS3 背景

CSS3中包含几个新的背景属性，提供更大背景元素控制。

顺序	描述	CSS
background-clip	规定背景的绘制区域。	3
background-origin	规定背景图片的定位区域。	3
background-size	规定背景图片的尺寸。	3

CSS3 渐变

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

径向渐变（Radial Gradients）- 由它们的中心定义

CSS3 文本效果

CSS3 字体

CSS3 转换和变形

3D转换属性

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3
transform-style	规定被嵌套元素如何在 3D 空间中显示。	3
perspective	规定 3D 元素的透视效果。	3
perspective-origin	规定 3D 元素的底部位置。	3
backface-visibility	定义元素在不面对屏幕时是否可见。	3

CSS3 过渡

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

CSS3 动画

要创建CSS3动画，你需要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

CSS3 多列

CSS3 盒模型

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框，主要包括以下用户界面属性：

resize：none | both | horizontal | vertical | inherit
box-sizing: content-box | border-box | inherit
outline:outline-color outline-style outline-width outine-offset

resize属性指定一个元素是否应该由用户去调整大小。

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

CSS3伸缩布局盒模型(弹性盒)

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

下表列出了在弹性盒子中常用到的属性:

属性	描述
display	指定 HTML 元素盒子类型。
flex-direction	指定了弹性容器中子元素的排列方式
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。

CSS3 多媒体查询

只爱泡泡的哆啦A梦呀

5楼 · 2020-10-19 20:44

 1 选择器 
2 RGBA和透明度 
 3 多栏布局 
 4 多背景图 
 5 Word Wrap 
 6 文字阴影
  7 @font-face属性 
 8 圆角(边框半径) 
9 边框图片 
10 盒阴影 
11 盒子大小 
12 媒体查询 
 13 语音

爱梦 - 拿来吧你

6楼 · 2020-10-20 09:40

CSS3实现圆角 (border-radius: 8px)

阴影 (box-shadow: 10px)

对文字加特效 (text-shadow)

线性渐变（gradient）

旋转（transform)：rotate(9deg)

缩放 (transform)：scale(0.85，0.90)

倾斜（transform)：skew（-9deg，0deg）

过渡效果（transition)

动画效果（animation)

增加了更多的选择器

CSS3选择器

nth-child

nth-last-child(n)

nth-of-type(n)

nth-last-of-type(n)

last-child

first-of-type

only-child

only-of-type

empty

checked

enabled

disabled

selection

not(s)

first-child：第一个直接字节点

CSS3的Animation

复制代码

box

复制代码

animation有八个动画属性：

animation-name：规定需要绑定到选择器的keyframe名称。

animation-duration：规定完成动画所花费的时候，以秒或毫秒计。

animation-timing-function：规定动画的速度曲线，设置动画播放方式。

animation-delay：规定动画开始之前的延迟。

animation-iteration-count：规定动画播放的次数。

animation-direction：规定是否应该轮流反向播放动画。

animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

animation-play-state：指定动画是否正在运行或已暂停。

语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

keyframes被称为关键帧，其类似于Flash中的关键帧。

复制代码

box

小小李兆佳

7楼 · 2020-10-21 11:31

第 1 选择器
第 2 RGBA和透明度
第 3 多栏布局
第 4 多背景图
第 5 Word Wrap
第 6 文字阴影
第 7 @font-face属性
第 8 圆角(边框半径)
第 9 边框图片
第 10 盒阴影
第 11 盒子大小
第 12 媒体查询
第 13 语音

楠楠楠楠

8楼 · 2020-10-21 17:09

css是一种网页样式语言，是对网页样式进行调整的。

css3是css的一个版本。

【Web语言】【Web前端基础】css3新特性有什么

CSS3 背景

CSS3 渐变

CSS3 动画

CSS3 盒模型

CSS3伸缩布局盒模型(弹性盒)

相关问题推荐

等你来答

热门问答

相关文章

【Web语言】【Web前端基础】css3新特性有什么

CSS3 背景

CSS3 渐变

CSS3 动画

CSS3 盒模型

CSS3伸缩布局盒模型(弹性盒)

相关问题推荐

等你来答

热门问答

相关文章

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间