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;
}
参考资料:
http://www.w3school.com.cn/css/index.asp
http://www.w3school.com.cn/css3/index.asp