浏览器的支持问题

由于 CSS3 标准尚在制定过程中,所以有些属性并不是所有浏览器都支持,不同内核的浏览器要在属性名前加上不同的前缀:

内核 浏览器 前缀
Webkit Chrome Safari -webkit-
Gecko Firefox -moz-
Presto Opera -o-
Trident IE -ms-

书写一个 CSS3 属性的方法:先将属性名带上各个浏览器的前缀写一遍,再写不带前缀的属性名。
IE8 及之前的浏览器不支持 CSS3

边框属性

  1. border-radius:圆角边框。是 border-top-left-radius, border-top-right-radius, border-buttom-left-radius, border-buttom-right-radius 的缩写形式。

    1
    2
    3
    4
    5
    6
    border-radius:50%;
    /* 相当于 ↓ */
    border-top-left-radius:50%;
    border-top-right-radius:50%;
    border-bottom-right-radius:50%;
    border-bottom-left-radius:50%;
    1
    2
    3
    4
    5
    6
    border-radius:2em 3em; /* 第一个值规定圆角的水平半径,第二个值规定垂直半径 */
    /* 相当于 ↓ */
    border-top-left-radius:2em 3em;
    border-top-right-radius:2em 3em;
    border-bottom-right-radius:2em 3em;
    border-bottom-left-radius:2em 3em;
  2. box-shadow:盒子阴影

    1
    box-shadow: h-shadow v-shadow blur spread color inset;
    描述
    h-shadow 必需。水平阴影的位置。允许负值。
    v-shadow 必需。垂直阴影的位置。允许负值。
    blur 可选。模糊距离。
    spread 可选。阴影的尺寸。
    color 可选。阴影的颜色。请参阅 CSS 颜色值。
    inset 可选。将外部阴影 (outset) 改为内部阴影。

例如:

1
box-shadow: 0 0 8px black;	// 这个应用于导航栏比较好看。black 也可以改为 gray

背景属性

  1. background-size:设置背景的尺寸。在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。

  2. background-image:可以指定多个图片文件,此时会形成多重背景。

  3. backgrount-originbackground-origin 属性规定 background-position 属性相对于什么位置来定位。注释:如果背景图像的 background-attachment 属性为 fixed,则该属性没有效果。

    描述
    padding-box 相对于内边距框来定位。
    border-box 相对于边框来定位。
    content-box 相对于内容框来定位。
  4. background-clip 属性规定背景的绘制区域。

    描述
    border-box 背景被裁剪到边框。
    padding-box 背景被裁剪到内边距框。
    content-box 背景被裁剪到内容框。

    示例

文本属性

  1. text-shadow:文本阴影。值与 box-shadow 相同。
  2. word-wrap:设置成 break-word,会将超出文本框的单词拆分并强制换行。

字体

在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。而通过 CSS3,web 设计师可以使用他们喜欢的任意字体。将字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。

字体格式:

  • TrueType 字体:.ttf(true type font)
  • OpenType 字体:.otf(open type font):OpenType 字体建立在 TrueType 基础之上,比 TrueType 更新
  • Embedded OpenType 字体:.eot(embedded open type):是 OpenType 的一种压缩形式。这种格式是专用的(仅 IE 提供支持
  • Web 开放字体格式:.woff(web open font format):建立在 TrueType 基础之上,已经发展为 web 字体的一个标准。大多数现代浏览器都对这种格式提供了很好的支持。
  • SVG 字体:.svg:svg 是一种通用图像格式,svg 字体使用这种格式表示字体(SVG字体文件一般较大)

大多数现代浏览器支持 .woff 格式的字体,所以在 web 上推荐使用这种格式。也可以为较老的浏览器提供一种候选格式,一般使用 TrueType 作为候选,因为这种字体在所有浏览器上也有很好的支持(IE 除外
IE8 及以前版本不支持 .woff, .ttf,所以要使用一个 .eot
移动设备小型设备不支持 web 字体,所以在 font-family 里一定要指定候选字体。

使用自定义字体的方法:先用 @font-face 声明字体,再在需要的位置使用,如:

1
2
3
4
5
6
7
8
9
10
11
12
<style>
@font-face {
font-family: myFirstFont; /* 声明字体名,可以是任意 */
src: url('Sansation_Light.woff'), /* 字体在服务器上的存储路径 */
url('Sansation_Light.ttf'),
url('Sansation_Light.eot');
}

body {
font-family: myFirstFont; /* 使用自定义字体 */
}
</style>

注:@开头的 CSS 规则是内置 CSS 规则,不是选择器规则。如:@font-face@import@media@keyframes

CSS3 字体描述符:

描述符 描述
font-family name 必需。规定字体的名称。
src URL 必需。定义字体文件的 URL。
font-stretch normal, condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded 可选。定义如何拉伸字体。默认是 “normal”。
font-style normal, italic, oblique 可选。定义字体的样式。默认是 “normal”。
font-weight normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900 可选。定义字体的粗细。默认是 “normal”。
unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。

2D 转换

CSS3 中使用 transform 属性进行 2D 转换。它的值有 translate(), rotate(), scale(), skew(), matrix()

1
2
3
transform: rotate(30deg); /* 将元素顺时针旋转 30 度 */
transform: scale(2,4); /* 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍 */
transform: skew(30deg,20deg); /* 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度 */

更多 2D 转换属性

3D 转换

translate 属性也可以进行 3D 转换。

1
2
transform: rotateX(120deg); /* 元素围绕其 X 轴以给定的度数进行旋转 */
transform: rotateY(120deg); /* 元素围绕其 Y 轴以给定的度数进行旋转 */

更多 3D 转换属性

CSS3 过渡

CSS3 的过渡属性在一定程度上可以取代 flash 和 JavaScript

1
2
3
4
5
6
7
8
9
10
11
div {
width: 100px;
height: 100px;
background: yellow;
transition: width 2s; /* 在 width 属性上应用过渡,时长为 2s */
}

div:hover {
width: 300px;
height: 300px;
}

该例中,当鼠标指向该元素时,元素的 width 或改变并应用过渡,高度不应用过渡。
注释:如果时长未规定,则不会有过渡效果,因为默认值是 0。
如果属性为多个值,用逗号隔开,如:

1
transition: width 2s, height 2s, transform 2s;

CSS 过渡效果会在被指定的属性变化时就发生,不管是使用伪类,还是使用 JavaScript。所以,可以用 JavaScript 结合 transition 做出很多平滑过渡的效果。

CSS3 动画

使用 CSS3 动画可以在一定程度是取代 flash 和 JavaScript
基本用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@keyframes myfirst /* 定义动画 myfirst。不同浏览器要加上不同前缀,如 firefox:@-moz-keyframes myfirst */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
/* 用百分比规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。 */
}

/* 动画定义好后,用 animation 属性为元素添加动画 */
div {
animation-name: myfirst; /* 规定使用哪个动画 */
animation-duration: 5s; /* 规定动画持续时间 */
animation-delay: 2s; /* 规定动画延迟多长时间开始播放,默认为 0 */
animation-iteration-count: infinite; /* 规定动画播放次数,默认为 1。infinite 代表无限次播放 */
animation-timing-function: linear; /* 规定动画播放速度。ease 为先慢后快后慢;linear 为全程匀速。可以自定义函数。默认为 ease */
}

CSS3 动画

CSS3 多列

CSS3 多列

CSS3 用户界面属性

CSS3 用户界面属性

其他

  1. CSS3 中新增了单位 remvwvh
    • rem(root em):em 是相对于父元素,rem是相对于 html根元素
    • vwvh 是相对于视口(viewport,也可以叫做视区、视界或可视范围)的宽度和高度。由于现在移动设备(主要是手机)的屏幕尺寸千差万别,如果仍然根据屏幕的物理分辨率来设计网页,效果会很难统一,因此 html5 和 CSS3 引入视口的概念来代替显示器的物理尺寸。通过在 meta 标签上的设置,视口的长宽可以跟设备的物理分辨率相等,也可以不相等(以便手机上可以实现用两个手指来放大会缩小页面),可根据需要灵活掌握。在 PC 中,视口的长宽则是跟浏览器窗口的物理分辨率恒等的。1vw 等于视口宽度(viewport width)的百分之一,也就是说 100vw 就是视口的宽度。同理,1vh 等于视口高度(viewport height)的百分之一。
  2. CSS3 中新增了 calc(),用于计算长度。如:div {width: calc(50% + (30px * 2))}。加减两端要加空格,乘除两端可以不加但推荐加。使用 calc() 的好处是:可以指定 绝对值+相对值 的数值。
  3. -webkit-text-size-adjust:iPhone 和 Android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjusttext-size-adjust 设为 none 或者 100% 可以关闭字体大小自动调整功能.一般用 100% 而不是 none,原因待查。