HTML5和CSS3新特性一览(二)

2018-02-08

CSS3

CSS3选择器

CSS3 边框（Borders）

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

border-image 设置所有边框图像的速记属性

border-radius 一个用于设置所有四个边框- *-半径属性的速记属性

box-shadow 附加一个或多个下拉框的阴影

div
{
  border:2px solid;
  border-radius:25px;
  box-shadow: 10px 10px 5px #888888;
  border-image:url(border.png) 30 30 round;
}

CSS3 背景

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

background-clip 规定背景的绘制区域。

background-origin 规定背景图片的定位区域。

background-size 规定背景图片的尺寸。

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);
}

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);

CSS3 文本效果

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

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>

CSS3 转换和变形

2D新转换属性

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

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转换属性

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

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 转换元素的透视视图。

CSS3 过渡

过渡属性

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

ransition 简写属性，用于在一个属性中设置四个过渡属性。 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;
}

CSS3 动画

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

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

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

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

@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;
}

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 的简写

CSS3 盒模型

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

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 多媒体查询

从 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) { ... }