CSS学习笔记之CSS3新特性

CSS 用于控制网页的样式和布局，而 CSS3 是最新的 CSS 标准，这篇文章将着重介绍 CSS3 中出现的新特性，以及它们的使用方法

1、边框

（1）圆角边框

可以使用 border-radius 属性用于创建圆角边框，其接受长度值作为参数，一般情况下，我们需要指定 4 个值分别对应 top-left、top-right、bottom-right、bottom-left 四个方向，但是运用 值赋值 的机制，允许我们可以指定少于 4 个值

其规则如下：

• 如果省略 bottom-left，则使用 top-right 代替
• 如果省略 bottom-right，则使用 top-left 代替
• 如果省略 top-right，则使用 top-left 代替

也就是说：

• 若提供四个值，则分别设置 top-left、top-right、bottom-right、bottom-left
• 若提供三个值，则第一个设置 top-left，第二个设置 top-right 和 bottom-left，第三个设置 bottom-right
• 若提供两个值，则第一个设置 top-left 和 bottom-right，第二个设置 top-right 和 bottom-left
• 若提供一个值，则同时设置 top-left、top-right、bottom-right、bottom-left

如果希望为某一方向单独创建圆角边框，则可以使用 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 分别设置

div {
    text-align:center;
    color:#000000;
    background-color:#dddddd;
    padding:10px 40px;
    width:350px;
    height:20px;
    border:2px solid #a1a1a1;
    border-radius:25px;
}

（2）边框阴影

可以使用 box-shadow 属性向边框添加一个或多个阴影，该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定，省略长度的值是 0

• h-shadow：必需，水平阴影的位置
• v-shadow：必需，垂直阴影的位置
• blur：可选，模糊距离
• spread：可选，阴影尺寸
• color：可选，阴影颜色
• inset：可选，将外部阴影改为内部阴影

div {
    width:350px;
    height:100px;
    background-color:#87CEEB;
    box-shadow: 10px 10px 5px #888888; /* h-shadow v-shadow blur color */
}

（3）边框图片

可以使用 border-image 属性利用图片创建边框，它是一个简写属性，用于设置以下的属性：

• border-image-source：图片路径
• border-image-slice：图片边框向内偏移
• border-image-width：图片边框的宽度
• border-image-outset：边框图像区域超出边框的量
• border-image-repeat：像边框是否应该平铺(repeated)、铺满(rounded)或拉伸(stretched)

div {
    border:10px solid transparent; /* 必须设置 border 属性，否则默认无边框 */
    width:350px;
    height:20px;
    padding:10px 20px;
    -webkit-border-image:url(......) 30 30 round; /* Safari and Chrome */
    -moz-border-image:url(......) 30 30 round; /* Old Firefox */
    -o-border-image:url(......) 30 30 round; /* Opera */
    /* Internet Explorer 不支持 border-image 属性 */
    border-image:url(......) 30 30 round;
}

2、背景

（1）背景尺寸

可以使用 background-size 属性规定背景图片的尺寸，在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的，而在 CSS3 中，可以规定背景图片的尺寸，其可选值如下：

• 长度值：设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为 auto
• 百分数值：根据父元素的百分比来设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为 auto
• cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
• contain：把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

（2）定位区域

可以使用 background-origin 属性规定 background-position 属性相对于什么位置来定位，其可选值如下：

• padding-box：背景相对于内边距框定位
• border-box：背景相对于边框盒定位
• content-box：背景相对于内容框定位

div {
    padding:30px;
    border:1px solid black;
    background-image:url(......);
    background-repeat:no-repeat;
    background-origin:content-box;
    background-position:left;
}

（3）绘制区域

可以使用 background-clip 属性规定背景的绘制区域，其可选值如下：

• padding-box：背景被裁剪到内边距框
• border-box：背景被裁剪到边框盒
• content-box：背景被裁剪到内容框

div {
    width:300px;
    height:300px;
    padding:30px;
    border:1px solid black;
    background-color:pink;
    background-clip:content-box;
}

3、文本

（1）文本阴影

可以使用 text-shadow 属性设置文本阴影效果，该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定，省略的长度值是 0

• h-shadow：必需，水平阴影的位置
• v-shadow：必需，垂直阴影的位置
• blur：可选，模糊距离
• color：可选，阴影颜色

h1 {
    text-shadow: 5px 5px 5px #888888;
}

（2）文本修剪

可以使用 text-overflow 属性规定当文本溢出包含元素时发生的事情，其可选值如下：

• clip：直接修剪文本
• ellipsis：显示省略符号来代表被修剪的文本
• string：显示给定的字符串来代表被修剪的文本

4、字体

在 CSS3 出现之前，必须使用已经在用户计算机上安装好的字体，但是通过 CSS3，可将需要使用的字体文件存放到服务器上，它会在需要时自动下载到用户计算机上，其在 @font-face 规则中定义

@font-face 规则中必须首先定义字体名称，然后指向字体文件

@font-face {
    font-family: fontName;
    src: url(......);
}

然后在 HTML 中通过 font-family 属性引用字体名称

div {
    font-family:fontName;
}

如果需要使用粗体文本，则需要包含另一个描述符的 @font-face

@font-face {
    font-family: fontName;
    src: url(......);
    font-weight: bold;
}

5、转换

（1）基本转换

可以通过 transform 属性使元素改变形状、尺寸和位置，其接受一个转换方法并在方法中指定值

下面提及的 X 轴是平行于屏幕水平向右，Y 轴是指平行于屏幕垂直向下，Z 轴是垂直于屏幕指向外侧

平移方法

• translate3d(x,y,z)：三维，参数为三个长度值，分别确定元素在 X 轴、Y 轴和 Z 轴的平移距离
• translate(x,y)：二维，参数为两个长度值，分别确定元素在 X 轴和 Y 轴上的平移距离
• translateX(x)：参数为一个长度值，确定元素在 X 轴上的平移距离
• translateY(y)：参数为一个长度值，确定元素在 Y 轴上的平移距离
• translateZ(z)：参数为一个长度值，确定元素在 Z 轴上的平移距离

缩放方法

• scale3d(x,y,z)：三维，参数为三个数值，分别确定元素在 X 轴、Y 轴和 Z 轴上的缩放倍数
• scale(x,y)：二维，参数为两个数值，分别确定元素在 X 轴和 Y 轴上的缩放倍数
• scaleX(x)：参数为一个数值，确定元素在 X 轴上的缩放倍数
• scaleY(y)：参数为一个数值，确定元素在 Y 轴上的缩放倍数
• scaleZ(z)：参数为一个数值，确定元素在 Z 轴上的缩放倍数

旋转方法

• rotate3d(x,y,z,n)：三维，从 (0,0,0) 指向 (x,y,z) 构成旋转轴，然后将左手拇指指向旋转轴正向，此时用四指绕行方向确定旋转方向，n 值确定旋转角度
• rotate(n)：二维，参数为一个角度值，若为正数，则顺时针旋转，若为负数，则逆时针旋转
• rotateX(x)：参数为一个角度值，确定元素沿 X 轴的旋转角度
• rotateY(y)：参数为一个角度值，确定元素沿 Y 轴的旋转角度
• rotateZ(z)：参数为一个角度值，确定元素沿 Z 轴的旋转角度

翻转方法

• skew(x,y)：参数为两个角度值，分别确定元素沿 X 轴和 Y 轴的翻转角度
• skewX(x)：参数为一个角度值，确定元素沿 X 轴的翻转角度
• skewY(y)：参数为一个角度值，确定元素沿 Y 轴的翻转角度

div {
    transform: translate(50px,100px);
    -o-transform: translate(50px,100px);        /* Opera */
    -ms-transform: translate(50px,100px);       /* IE 9 */
    -moz-transform: translate(50px,100px);      /* Firefox */
    -webkit-transform: translate(50px,100px);   /* Safari and Chrome */
}

（2）旋转基点

transform-origin 属性需要配合 transform 属性一同使用，用于设置旋转元素的基点位置，使用格式如下：transform-origin: x-axis y-axis z-axis;

• x-axis：定义视图在 X 轴的位置，可选值有 left、center、right、长度值、百分数值
• y-axis：定义视图在 Y 轴的位置，可选值有 left、center、right、长度值、百分数值
• z-axis：定义视图在 Z 轴的位置，可选值有 长度值

（3）背面可见性

可以使用 backface-visibility 属性定义当元素不面向屏幕时的可见性，如果不希望看到旋转元素的背面时，可使用该属性，其可选值有两个：

• visible：背面可见
• hidden：背面不可见

6、过渡

通过 CSS3，我们可以在不使用 Flash 或 JavaScript 的情况下，使得元素从一种样式变换为另一种样式时添加过渡效果

（1）属性名称

可以使用 transition-property 属性规定应用过渡效果的 CSS 属性名称，当指定的 CSS 属性改变时，过渡效果开始作用，其可选值如下：

• none：默认值，没有属性获得过渡效果
• all：所有属性获得过渡效果
• 名称列表：定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔

（2）作用时间

可以使用 transition-duration 属性规定过渡效果的速度时间，其接受一个时间值，默认为 0，因此在使用过渡效果时，必须要设置 transition-duration 属性，否则将看不到过渡效果

（3）作用速度

可以使用 transition-timing-function 属性规定过渡效果的速度曲线，其可选值如下：

• linear：以相同的速度从开始至结束
• ease：默认值，以慢速开始，然后变快，以慢速结束
• ease-in：以慢速开始
• ease-out：以慢速结束
• ease-in-out：以慢速开始，以慢速结束
• cubic-bezier(n,n,n,n)：自定义，n 是 0 ~ 1 之间的数值

（4）延迟时间

可以使用 transition-delay 属性规定延迟过渡效果的开始，其接受一个时间值，默认为 0

（5）简写属性

为了方便，可以仅在 transition 属性中设置所有有关过渡效果的属性，设置的顺序如下：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

div {
    width:100px;
    height:100px;
    background:blue;
    transition:width 2s;
    -o-transition:width 2s; /* Opera */
    -moz-transition:width 2s; /* Firefox */
    -webkit-transition:width 2s; /* Safari and Chrome */
}

div:hover {
    width:300px;
}

/* 当鼠标停留在 div 元素上时，其宽度将会变化，从而产生过渡效果 */

7、动画

通过 CSS3，我们可以在不使用 Flash 或 JavaScript 的情况下，使为网页创建动画。我们可以通过 @keyframes 规则创建动画，如果在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改变为新样式的动画效果

（1）动画名称

可以使用 animation-name 属性规定动画名称，其可选值有两个：

• none：无动画，可用于覆盖来自级联的动画

• 名称：定义创建动画的 keyframe 名称

（2）播放时间

可以使用 animation-duration 属性规定动画完成一个周期所需时间，其接受一个时间值，默认为 0，因此在使用动画时，必须要设置 animation-duration属性，否则将看不到动画

（3）播放速率

可以使用 animation-timing-function 属性规定过渡效果的速度曲线，其可选值如下：

• linear：以相同的速度从开始至结束
• ease：默认值，以慢速开始，然后变快，以慢速结束
• ease-in：以慢速开始
• ease-out：以慢速结束
• ease-in-out：以慢速开始，以慢速结束
• cubic-bezier(n,n,n,n)：自定义，n 是 0 ~ 1 之间的数值

（4）延迟时间

可以使用 animation-delay 属性规定延迟过渡效果的开始，其接受一个时间值，默认为 0

（5）播放次数

可以使用 animation-iteration-count 属性规定动画的播放次数，其接受一个数字，默认是 1；或者设置为 infinite，表示无限次播放

（6）播放方向

可以使用 animation-direction 属性规定动画下一周期的播放方向，其可选值如下：

• normal：默认值，正常播放
• alternate：轮流反向播放

（7）播放状态

可以使用 animation-play-state 属性规定动画的播放状态，其可选值如下：

• running：默认值，正在播放
• paused：暂停

（8）间隙可见性

可以使用 animation-fill-mode 属性规定动画在播放之前或之后效果的可见性，其可选值如下：

• none：不改变默认行为
• forwards：在动画完成之后，保持最后属性值（在最后一个关键帧中定义）
• backwards：在动画显示之前，应用开始属性值（在第一个关键帧中定义）
• both：在动画显示之前应用开始属性值，在动画完成之后保持最后属性值

（9）简写属性

为了方便，可以仅在 animation 属性中设置所有有关动画的属性，设置的顺序如下：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

div {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    nimation:test 2s linear infinite alternate;
    /*Safari and Chrome*/
    -webkit-animation:test 2s linear infinite alternate; 
}

@keyframes test {
    from {left:0px;}
    to {left:200px;}
}

/*Safari and Chrome*/
@-webkit-keyframes test {
    from {left:0px;}
    to {left:200px;}
}

8、多列

（1）列数

可以使用 column-count 属性确定划分的列数，其可选值如下：

• 数值：自定义需要划分的列数
• auto：默认值，由其他属性自动决定列数

（2）间隔

可以使用 column-gap 属性确定列间间隔，其可选值如下：

• 长度值：规定列间间隔为指定长度
• normal：规定列间间隔为一个常规间隔，W3C 的建议值是 1em

（3）样式

可以使用 column-rule 属性确定列间样式，它是一个简写属性，包含以下属性：

• column-rule-color：设置列间颜色规则，其接受一个颜色值
• column-rule-width：设置列间宽度规则，其可选值如下：
  • thin：纤细宽度
  • medium：中等宽度
  • thick：宽厚宽度
  • 长度值：自定义宽度
• column-rule-style：设置列间样式规则，其可选值如下：
  • none：没有样式
  • hidden：隐藏样式
  • dotted：点状样式
  • dashed：虚线样式
  • solid：实线样式
  • double：双线样式
  • groove：3D grooved 样式，效果取决于宽度和颜色值
  • ridge：3D ridged 样式，效果取决于宽度和颜色值
  • inset：3D inset 样式，效果取决于宽度和颜色值
  • outset：3D outset 样式，效果取决于宽度和颜色值

（4）列宽

可以使用 column-width 属性确定列的宽度，其可选值如下：

• 长度值：自定义列宽
• auto：默认值，由浏览器自动决定列宽

9、自定义尺寸

resize 属性规定是否由用户调整元素的尺寸，其可选值如下：

• none：用户无法调整元素的尺寸
• horizontal：用户可调整元素的宽度
• vertical：用户可调整元素的高度
• both：用户可调整元素的高度和宽度

注意，在使用此属性前必须先设置 overflow 属性，其值可以是 auto、hidden 或 scroll

div {
    border:1px solid;
    width:350px;
    height:20px;
    padding:10px 40px; 
    overflow:auto;
    resize:both;
}