zerojs-零技术

css3 新增特性

1. CSS3 选择器

选择器示例示例说明CSS
element1~element2p~ul选择 p 元素之后的每一个 ul 元素3
[attribute^=value]a[src^="https"]选择每一个 src 属性的值以"https"开头的元素3
[attribute$=value]a[src$=".pdf"]选择每一个 src 属性的值以".pdf"结尾的元素3
[attribute*=value]a[src*="44lan"]选择每一个 src 属性的值包含子字符串"44lan"的元素3
:first-of-typep:first-of-type选择每个 p 元素是其父级的第一个 p 元素3
:last-of-typep:last-of-type选择每个 p 元素是其父级的最后一个 p 元素3
:only-of-typep:only-of-type选择每个 p 元素是其父级的唯一 p 元素3
:only-childp:only-child选择每个 p 元素是其父级的唯一子元素3
:nth-child(n)p:nth-child(2)选择每个 p 元素是其父级的第二个子元素3
:nth-last-child(n)p:nth-last-child(2)选择每个 p 元素的是其父级的第二个子元素，从最后一个子项计数3
:nth-of-type(n)p:nth-of-type(2)选择每个 p 元素是其父级的第二个 p 元素3
:nth-last-of-type(n)p:nth-last-of-type(2)选择每个 p 元素的是其父级的第二个 p 元素，从最后一个子项计数3
:last-childp:last-child选择每个 p 元素是其父级的最后一个子级。3
:root:root选择文档的根元素3
:emptyp:empty选择每个没有任何子级的 p 元素（包括文本节点）3
:target#news:target选择当前活动的#news 元素（包含该锚名称的点击的 URL）3
:enabledinput:enabled选择每一个已启用的输入元素3
:disabledinput:disabled选择每一个禁用的输入元素3
:checkedinput:checked选择每个选中的输入元素3
:not(selector):not(p)选择每个并非 p 元素的元素3
::selection::selection匹配元素中被用户选中或处于高亮状态的部分3
:out-of-range:out-of-range匹配值在指定区间之外的 input 元素3
:in-range:in-range匹配值在指定区间之内的 input 元素3
:read-write:read-write用于匹配可读及可写的元素3
:read-only:read-only用于匹配设置 "readonly"（只读） 属性的元素3
:optional:optional用于匹配可选的输入元素3
:required:required用于匹配设置了 "required" 属性的元素3
:valid:valid用于匹配输入值为合法的元素3
:invalid:invalid用于匹配输入值为非法的元素

2. CSS3 边框（Borders）

用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序

属性说明CSS
border-image设置所有边框图像的速记属性。3
border-radius一个用于设置所有四个边框- *-半径属性的速记属性3
box-shadow附加一个或多个下拉框的阴影3
div {
  border: 2px solid;
  border-radius: 25px;
  box-shadow: 10px 10px 5px #888888;
  border-image: url(border.png) 30 30 round;
}

3. CSS3 背景

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

属性说明CSS
background-clip规定背景的绘制区域。3
background-origin规定背景图片的定位区域。3
background-size规定背景图片的尺寸。3
div {
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-origin: content-box;
}

多背景

body {
  background-image: url(img_flwr.gif), url(img_tree.gif);
}

4. CSS3 渐变

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

  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
background: linear-gradient(direction, color-stop1, color-stop2, ...);
  • 径向渐变（Radial Gradients）- 由它们的中心定义
background: radial-gradient(center, shape size, start-color, ..., last-color);

5. CSS3 文本效果

属性说明CSS
hanging-punctuation规定标点字符是否位于线框之外。3
punctuation-trim规定是否对标点字符进行修剪。3
text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。3
text-emphasis向元素的文本应用重点标记以及重点标记的前景色。3
text-justify规定当 text-align 设置为 "justify" 时所使用的对齐方法。3
text-outline规定文本的轮廓。3
text-overflow规定当文本溢出包含元素时发生的事情。3
text-shadow向文本添加阴影。3
text-wrap规定文本的换行规则。3
word-break规定非中日韩文本的换行规则。3
word-wrap允许对长的不可分割的单词进行分割并换行到下一行。3

6. CSS3 字体

以前 CSS3 的版本，网页设计师不得不使用用户计算机上已经安装的字体。使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。您所选择的字体在新的 CSS3 版本有关于@font-face 规则描述。您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

<style>
  @font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
  }
  div {
    font-family: myFirstFont;
  }
</style>

7. CSS3 转换和变形

2D 新转换属性

以下列出了所有的转换属性:

Property描述CSS
transform 适用于 2D 或 3D 转换的元素3
transform-origin允许您更改转化元素位置

2D 转换方法

函数描述
matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。
translate(x,y)定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)定义 2D 转换，沿着 X 轴移动元素。
translateY(n)定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)定义 2D 缩放转换，改变元素的宽度。
scaleY(n)定义 2D 缩放转换，改变元素的高度。
rotate(angle)定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。

3D 转换属性

下表列出了所有的转换属性：

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

3D 转换方法

函数描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)定义 3D 转化。
translateX(x)定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿 X 轴的 3D 旋转。
rotateY(angle)定义沿 Y 轴的 3D 旋转。
rotateZ(angle)定义沿 Z 轴的 3D 旋转。
perspective(n)定义 3D 转换元素的透视视图。

8. CSS3 过渡

过渡属性

下表列出了所有的过渡属性:

属性描述CSS
transition简写属性，用于在一个属性中设置四个过渡属性。3
transition-property规定应用过渡的 CSS 属性的名称。3
transition-duration定义过渡效果花费的时间。默认是 0。3
transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。3
transition-delay规定过渡效果何时开始。默认是 0。3
div {
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 2s;
  /* Safari */
  -webkit-transition-property: width;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  -webkit-transition-delay: 2s;
}

9. CSS3 动画

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

实例 当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

@keyframes myfirst {
  0% {
    background: red;
  }
  25% {
    background: yellow;
  }
  50% {
    background: blue;
  }
  100% {
    background: green;
  }
}

下面的表格列出了 @keyframes 规则和所有动画属性：

属性描述CSS
@keyframes规定动画。3
animation所有动画属性的简写属性，除了 animation-play-state 属性。3
animation-name规定 @keyframes 动画的名称。3
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-function规定动画的速度曲线。默认是 "ease"。3
animation-delay规定动画何时开始。默认是 0。3
animation-iteration-count规定动画被播放的次数。默认是 1。3
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。3
animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3
div {
  animation-name: myfirst;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
  /* Safari and Chrome: */
  -webkit-animation-name: myfirst;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-play-state: running;
}

10. CSS3 多列

下表列出了所有 CSS3 的多列属性：

属性描述
column-count指定元素应该被分割的列数。
column-fill指定如何填充列
column-gap指定列与列之间的间隙
column-rule所有 column-rule-* 属性的简写
column-rule-color指定两列间边框的颜色
column-rule-style指定两列间边框的样式
column-rule-width指定两列间边框的厚度
column-span指定元素要跨越多少列
column-width指定列的宽度
columns设置 column-width 和 column-count 的简写

11. 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 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

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

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

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

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

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

13. CSS3 多媒体查询

从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表，那么您可能已经使用过媒体类型。清单 1 展示了一个示例。

清单 1. 使用媒体类型

<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

清单 2. 媒体查询规则

@media all and (min-width: 800px) { ... }

@media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。

(min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。

清单 3. and 条件

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

清单 4. or 关键词

@media (min-width:800px) or (orientation:portrait) { ... }

清单 5. 使用 not

@media (not min-width:800px) { ... }
Last Updated:
Contributors: zerojs