CSS
程序员文章站
2022-03-10 21:23:09
...
动画
aaa@qq.com
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
语法:
@keyframes animationname {keyframes-selector {css-styles;}}
| 值 | 描述 |
|---|---|
| animationname | 必需。定义动画的名称 |
| keyframes-selector | 必需。动画时长的百分比。合法的值：0-100% ; from（与 0% 相同）; to（与 100% 相同） |
| css-styles | 必需。一个或多个合法的 CSS 样式属性。 |
浏览器支持
- 目前浏览器都不支持 @keyframes 规则。
- Firefox 支持替代的 @-moz-keyframes 规则。
- Opera 支持替代的 @-o-keyframes 规则。
- Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。
注意:
2.animation
复合属性
div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
语法:
animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
| 默认值： | none 0 ease 0 1 normal |
| 继承性： | no |
| JavaScript 语法： | object.style.animation=“mymove 5s infinite” |
浏览器支持
- Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
- Safari 和 Chrome 支持替代的 -webkit-animation 属性。
- Internet Explorer 9 以及更早的版本不支持 animation 属性。
注意:
- 请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
3.animation-name
div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
语法:
animation-name: keyframename|none;
| 值 | 描述 |
|---|---|
| keyframename | 规定需要绑定到选择器的 keyframe 名称。 |
| none | 规定无动画效果（可用于覆盖来自级联的动画）。 |
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.animationName=“mymove” |
浏览器支持
- Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
- Safari 和 Chrome 支持替代的 -webkit-animation 属性。
- Internet Explorer 9 以及更早的版本不支持 animation 属性。
注意:
- 请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
4.animation-duration
div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
语法:
animation-duration: time;
| 值 | 描述 |
|---|---|
| time | 规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。 |
| 默认值： | 0 |
| 继承性： | no |
| JavaScript 语法： | object.style.animationDuration=“3s” |
浏览器支持
- Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
- Safari 和 Chrome 支持替代的 -webkit-animation 属性。
- Internet Explorer 9 以及更早的版本不支持 animation 属性。
注意:
- 请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
5.animation-timing-function
速度曲线
/* W3C 和 Opera: */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari 和 Chrome: */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
语法:
animation-timing-function: value;
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
| 默认值： | ease |
| 继承性： | no |
| JavaScript 语法： | object.style.animationTimingFunction=“linear” |
浏览器支持
- Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
- Safari 和 Chrome 支持替代的 -webkit-animation 属性。
- Internet Explorer 9 以及更早的版本不支持 animation 属性。
注意:
- 请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
6.animation-duration
div
{
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari 和 Chrome */
animation-delay: -2s /* W3C 和 Opera */
-moz-animation-delay: -2s /* Firefox */
-webkit-animation-delay: -2s /* Safari 和 Chrome */
}
语法:
animation-duration: time;
| 值 | 描述 |
|---|---|
| time | 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。 |
| 默认值： | 0 |
| 继承性： | no |
| JavaScript 语法： | object.style.animationDelay=“2s” |
浏览器支持
- Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
- Safari 和 Chrome 支持替代的 -webkit-animation 属性。
- Internet Explorer 9 以及更早的版本不支持 animation 属性。
注意:
- 请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
7.animation-iteration-count
div
{
animation-iteration-count:3;
-webkit-animation-iteration-count:3; /* Safari 和 Chrome */
}
语法:animation-iteration-count: n|infinite;
| 值 | 描述 |
|---|---|
| n | 定义动画播放次数的数值。 |
| infinite | 规定动画应该无限次播放。 |
| 默认值： | 1 |
| 继承性： | no |
| JavaScript 语法： | object.style.animationIterationCount=3 |
浏览器支持
- Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
- Safari 和 Chrome 支持替代的 -webkit-animation 属性。
- Internet Explorer 9 以及更早的版本不支持 animation 属性。
注意:
- 请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
8.animation-iteration-count
animation-direction 属性定义是否应该轮流反向播放动画。
div
{
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */
}
语法:animation-direction: normal|alternate;
| 值 | 描述 |
|---|---|
| normal | 默认值。动画应该正常播放。 |
| alternate | 动画应该轮流反向播放。 |
| 默认值： | normal |
| 继承性： | no |
| JavaScript 语法： | object.style.animationDirection=“alternate” |
浏览器支持
- Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
- Safari 和 Chrome 支持替代的 -webkit-animation 属性。
- Internet Explorer 9 以及更早的版本不支持 animation 属性。
注意:
- 请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
9.animation-play-state
animation-play-state 属性规定动画正在运行还是暂停。
div
{
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
}
语法:animation-direction: normal|alternate;
| 值 | 描述 |
|---|---|
| paused | 规定动画已暂停。 |
| running | 规定动画正在播放。 |
| 默认值： | running |
| 继承性： | no |
| JavaScript 语法： | object.style.animationPlayState=“paused” |
浏览器支持
- Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
- Safari 和 Chrome 支持替代的 -webkit-animation 属性。
- Internet Explorer 9 以及更早的版本不支持 animation 属性。
注意:
- 请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
10.animation-fill-mode
animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
h1
{
animation-fill-mode: forwards;
}
语法:animation-fill-mode : none | forwards | backwards | both;
| 值 | 描述 |
|---|---|
| none | 不改变默认行为。 |
| forwards | 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 |
| backwards | 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 |
| both | 向前和向后填充模式都被应用。 |
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.animationFillMode=none |
浏览器支持
- Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
- Safari 和 Chrome 支持替代的 -webkit-animation 属性。
- Internet Explorer 9 以及更早的版本不支持 animation 属性。
注意:
- 请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
背景
11.background
复合属性
body
{
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}
语法:
| 值 | 描述 |
|---|---|
| background-color | 规定要使用的背景颜色。 |
| background-position | 规定背景图像的位置。 |
| background-repeat | 规定如何重复背景图像。 |
| background-origin | 规定背景图片的定位区域。 |
| background-size | 规定背景图片的尺寸。 |
| background-clip | 规定背景的绘制区域。 |
| background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动。 |
| background-image | 规定要使用的背景图像。 |
| inherit | 规定应该从父元素继承 background 属性的设置。 |
| 默认值： | not specified |
| 继承性： | no |
| JavaScript 语法： | object.style.background=“white url(paper.gif) repeat-y” |
浏览器支持
- 所有浏览器都支持 background 属性。
- IE8 以及更早的浏览器不支持一个元素多个背景图像。
- IE7 以及更早的浏览器不支持 “inherit”。IE8 需要 !DOCTYPE。IE9 支持 “inherit”。
注意:
12.background-attachment
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
body
{
background-image: url(bgimage.gif);
background-attachment: fixed;
}
语法:
| 值 | 描述 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
| 默认值： | scroll |
| 继承性： | no |
| JavaScript 语法： | object.style.backgroundAttachment=“fixed” |
浏览器支持
- 所有浏览器都支持 background-attachment 属性。
- 任何版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
13.background-color
background-color 属性设置元素的背景颜色。
body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
语法:
| 值 | 描述 |
|---|---|
| color_name | 规定颜色值为颜色名称的背景颜色（比如 red）。 |
| hex_number | 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。 |
| rgb_number | 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。 |
| transparent | 默认。背景颜色为透明。 |
| inherit | 规定应该从父元素继承 background-color 属性的设置。 |
| 默认值： | transparent |
| 继承性： | no |
| JavaScript 语法： | object.style.backgroundColor="#00FF00" |
浏览器支持
- 所有浏览器都支持 background-color 属性。
- 任何版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。
- 尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。
14.background-image
background-image 属性为元素设置背景图像。
body
{
background-image: url(bgimage.gif);
background-color: #000000;
}
语法:
| 值 | 描述 |
|---|---|
| url(‘URL’) | 指向图像的路径。 |
| none | 默认值。不显示背景图像。 |
| inherit | 规定应该从父元素继承 background-image 属性的设置。 |
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.backgroundImage=“url(stars.gif)” |
浏览器支持
- 所有浏览器都支持 background-image 属性。
- 任何版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。
- 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
15.background-position
background-position 属性设置背景图像的起始位置。
body
{
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | 0% 0% |
| 继承性： | no |
| JavaScript 语法： | object.style.backgroundPosition=“center” |
浏览器支持
- 所有浏览器都支持 background-position 属性。
- 任何版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 您需要把 background-attachment 属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作。
16.background-position
background-repeat 属性设置是否及如何重复背景图像。
body
{
background-image: url(stars.gif);
background-repeat: repeat-y;
}
语法:
| 值 | 描述 |
|---|---|
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。 |
| no-repeat | 背景图像将仅显示一次。 |
| inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
| 默认值： | repeat |
| 继承性： | no |
| JavaScript 语法： | object.style.backgroundRepeat=“repeat-y” |
浏览器支持
- 所有浏览器都支持 background-repeat 属性。
- 任何版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
17.background-position
background-clip 属性规定背景的绘制区域。
div
{
background-color:yellow;
background-clip:content-box;
}
语法:background-clip: border-box|padding-box|content-box;
| 值 | 描述 |
|---|---|
| border-box | 背景被裁剪到边框盒。 |
| padding-box | 背景被裁剪到内边距框。 |
| content-box | 背景被裁剪到内容框。 |
| 默认值： | border-box |
| 继承性： | no |
| JavaScript 语法： | object.style.backgroundClip=“content-box” |
浏览器支持
- 所有浏览器都支持 background-clip 属性。
- Internet Explorer 8 以及更早的版本不支持 background-clip 属性。
注意:
18.background-origin
background-origin 属性规定 background-position 属性相对于什么位置来定位。
div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
语法:background-origin: padding-box|border-box|content-box;
| 值 | 描述 |
|---|---|
| border-box | 背景图像相对于边框盒来定位。 |
| padding-box | 背景图像相对于内边距框来定位。 |
| content-box | 背景图像相对于内容框来定位。 |
| 默认值： | padding-box |
| 继承性： | no |
| JavaScript 语法： | object.style.backgroundOrigin=“content-box” |
浏览器支持
- IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-origin 属性。
注意:
- 如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。
19.background-size
background-size 属性规定背景图像的尺寸。
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
语法:background-size: length|percentage|cover|contain;
| 值 | 描述 |
|---|---|
| 默认值： | auto |
| 继承性： | no |
| JavaScript 语法： | object.style.backgroundSize=“60px 80px” |
浏览器支持
IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。
注意:
- 如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。
边框
20.border
复合属性
p
{
border:5px solid red;
}
语法:background-size: length|percentage|cover|contain;
| 值 | 描述 |
|---|---|
| border-width | 规定边框的宽度。 |
| border-style | 规定边框的样式。 |
| border-color | 规定边框的颜色。 |
| inherit | 规定应该从父元素继承 border 属性的设置。 |
| 默认值： | not specified |
| 继承性： | no |
| JavaScript 语法： | object.style.border=“3px solid blue” |
浏览器支持
IE7 以及更早版本的浏览器不支持值 “inherit”。IE8 需要 !DOCTYPE。IE9 支持 “inherit”。
注意:
21.border-color
p
{
border-style:solid;
border-color:#ff0000 #0000ff;
border-color:red green blue pink;
border-color:red green blue;
border-color:dotted red green;
border-color:red;
}
语法:
| 值 | 描述 |
|---|---|
| color_name | 规定颜色值为颜色名称的背景颜色（比如 red）。 |
| hex_number | 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。 |
| rgb_number | 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。 |
| transparent | 默认。背景颜色为透明。 |
| inherit | 规定应该从父元素继承 background-color 属性的设置。 |
| 默认值： | not specified |
| 继承性： | no |
| JavaScript 语法： | object.style.borderColor="#FF0000 blue" |
浏览器支持
- Internet Explorer 6（以及更早的版本）不支持属性值 “transparent”。
- IE7 以及更早版本的浏览器不支持值 “inherit”。IE8 需要 !DOCTYPE。IE9 支持 “inherit”。
注意:
- 请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
22.border-style
border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
p
{
border-style:solid;
border-style:dotted solid double dashed;
border-style:dotted solid double;
border-style:dotted solid;
border-style:dotted;
}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | not specified |
| 继承性： | no |
| JavaScript 语法： | object.style.borderStyle=“dotted double” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit” 或 “hidden”。
注意:
- 请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
23.border-width
border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
p
{
border-style:solid;
border-width:15px;
border-width:thin medium thick 10px;
border-width:thin medium thick;
border-width:thin medium;
border-width:thin;
}
语法:
| 值 | 描述 |
|---|---|
| thin | 定义细的边框。 |
| medium | 默认。定义中等的边框。 |
| thick | 定义粗的边框。 |
| length | 允许您自定义边框的宽度。 |
| inherit | 规定应该从父元素继承边框宽度。 |
| 默认值： | medium |
| 继承性： | no |
| JavaScript 语法： | object.style.borderWidth=“thin thick” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。
24.border-top
复合属性
p
{
border-style:solid;
border-top:thick double #ff0000;
}
语法:
| 值 | 描述 |
|---|---|
| border-top-width | 规定上边框的宽度。 |
| border-top-style | 规定上边框的样式。 |
| border-top-color | 规定上边框的颜色。 |
| inherit | 规定应该从父元素继承 border-top 属性的设置。 |
| 默认值： | not specified |
| 继承性： | no |
| JavaScript 语法： | object.style.borderTop=“3px solid blue” |
浏览器支持
- IE7 以及更早版本的浏览器不支持值 “inherit”。IE8 需要 !DOCTYPE。IE9 支持 “inherit”。
注意:
25.border-top-color
p
{
border-style:solid;
border-top-color:#ff0000;
}
语法:
| 值 | 描述 |
|---|---|
| color_name | 规定颜色值为颜色名称的背景颜色（比如 red）。 |
| hex_number | 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。 |
| rgb_number | 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。 |
| transparent | 默认。背景颜色为透明。 |
| inherit | 规定应该从父元素继承边框颜色。 |
| 默认值： | not specified |
| 继承性： | no |
| JavaScript 语法： | object.style.borderTopColor=“blue” |
浏览器支持
- Internet Explorer 6（以及更早的版本）不支持属性值 “transparent”。
- IE7 以及更早版本的浏览器不支持值 “inherit”。IE8 需要 !DOCTYPE。IE9 支持 “inherit”。
注意:
- 请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
26.border-top-style
border-top-style 属性设置元素的上边框的样式。
p
{
border-style:solid;
border-top-style:dotted;
}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | not specified |
| 继承性： | no |
| JavaScript 语法： | object.style.borderTopStyle=“dotted” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit” 或 “hidden”。
注意:
- 请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
27.border-top-width
border-top-width 属性设置元素的上边框的宽度。
p
{
border-style:solid;
border-top-width:15px;
}
语法:
| 值 | 描述 |
|---|---|
| thin | 定义细的边框。 |
| medium | 默认。定义中等的边框。 |
| thick | 定义粗的边框。 |
| length | 允许您自定义边框的宽度。 |
| inherit | 规定应该从父元素继承边框宽度。 |
| 默认值： | medium |
| 继承性： | no |
| JavaScript 语法： | object.style.borderTopWidth=“thick” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。
- 请始终在 border-top-width 属性之前声明 border-style 属性。元素只有在获得边框之后，才能改变其边框的宽度。
28.border-bottom-left-radius
border-bottom-left-radius 属性定义左下角边框的形状。
div
{
border:2px solid;
border-bottom-left-radius:2em;
}
语法:border-bottom-left-radius: length|% [length|%];
| 值 | 描述 |
|---|---|
| length | 定义左下角的形状。 |
| % | 以百分比值定义左下角的形状。 |
| 默认值： | 0 |
| 继承性： | no |
| JavaScript 语法： | object.style.borderBottomLeftRadius=“5px” |
浏览器支持
- IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-bottom-left-radius 属性。
注意:
- border-bottom-left-radius 属性的长度值和百分比值定义四分之一椭圆（定义外部边框边缘的边角形状）的半径（radii）。第一个值是水平半径，第二个值是垂直半径。如果省略第二个值，则复制第一个值。如果长度为零，则边角为方形，而不是圆形。水平半径的百分比值参考边框盒的宽度，而垂直半径的百分比值参考边框盒的高度。
29.border-radius
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
div
{
border:2px solid;
border-radius:25px;
border-radius:2em;
border-radius: 2em 1em 4em / 0.5em 3em;
等价于：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
}
语法:border-radius: 1-4 length|% / 1-4 length|%;
| 值 | 描述 |
|---|---|
| length | 定义圆角的形状。 |
| % | 以百分比值定义圆角的形状。 |
| 默认值： | 0 |
| 继承性： | no |
| JavaScript 语法： | object.style.borderRadius=“5px” |
浏览器支持
- IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。
注意:
- 按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
30.border-radius
border-image 属性是一个简写属性
div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
语法:border-radius: 1-4 length|% / 1-4 length|%;
| 值 | 描述 |
|---|---|
| border-image-source | 用在边框的图片的路径。 |
| border-image-slice | 图片边框向内偏移。 |
| border-image-width | 图片边框的宽度。 |
| border-image-outset | 边框图像区域超出边框的量。 |
| border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |
| 默认值： | none 100% 1 0 stretch |
| 继承性： | no |
| JavaScript 语法： | object.style.borderImage=“url(border.png) 30 30 round” |
浏览器支持
- Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持 border-image 属性。
- Safari 5 支持替代的 -webkit-border-image 属性。
注意:
- 按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
31.border-image-outset
border-image-outset 属性规定边框图像超过边框盒的量。
div
{
border-image-source: url(border.png);
border-image-outset: 30 30;
}
语法:border-image-outset: length|number;
| 值 | 描述 |
|---|---|
| length | 长度 |
| number | 代表对应的 border-width 的倍数。 |
| 默认值： | 0 |
| 继承性： | no |
| JavaScript 语法： | object.style.borderImageOutset=“30 30” |
浏览器支持
- Opera 不支持 border-image-outset 属性。
- Internet Explorer 10 以及更早的版本不支持 border-image-outset 属性。
- Safari 5 以及更早的版本不支持 border-image-outset 属性。
注意:
- border-image-outset 属性规定边框图像超出边框盒的量。在上、右、下、左侧。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许任何负值作为 border-image-outset 值。
31.border-image-repeat
border-image-repeat 属性规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。
div
{
border-image-source: url(border.png);
border-image-repeat: round;
}
语法:border-image-repeat: stretch|repeat|round;
| 值 | 描述 |
|---|---|
| stretch | 拉伸图像来填充区域 |
| repeat | 平铺（重复）图像来填充区域。 |
| round | 类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。 |
| 默认值： | stretch |
| 继承性： | no |
| JavaScript 语法： | object.style.borderImageRepeat=“round” |
浏览器支持
- Opera 不支持 border-image-outset 属性。
- Internet Explorer 10 以及更早的版本不支持 border-image-outset 属性。
- Safari 5 以及更早的版本不支持 border-image-outset 属性。
注意:
- 该属性规定如何延展和铺排边框图像的边缘和中间部分。因此，您可以规定两个值。如果省略第二个值，则采取与第一个值相同的值。
32.border-image-slice
border-image-slice 属性规定图像边框的向内偏移。
div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}
语法:border-image-slice: number|%|fill;
| 值 | 描述 |
|---|---|
| number | 数字值，代表图像中像素（如果是光栅图像）或矢量坐标（如果是矢量图像）。 |
| % | 相对于图像尺寸的百分比值：图像的宽度影响水平偏移，高度影响垂直偏移。 |
| fill | 保留边框图像的中间部分。 |
| 默认值： | 100% |
| 继承性： | no |
| JavaScript 语法： | object.style.borderImageSlice=“50% 50%” |
浏览器支持
- Opera 不支持 border-image-outset 属性。
- Internet Explorer 10 以及更早的版本不支持 border-image-outset 属性。
- Safari 5 以及更早的版本不支持 border-image-outset 属性。
注意:
- 该属性规定图像的上、右、下、左侧边缘的向内偏移，图像被分割为九个区域：四个角、四条边以及一个中间区域。除非使用了关键词 fill，否则中间的图像部分会被丢弃。如果省略第四个数值/百分比，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。
32.border-image-source
border-image-source 属性规定要使用的图像，代替 border-style 属性中设置的边框样式。
div
{
border-image-source: url(border.png);
}
语法:border-image-source: none|image;
| 值 | 描述 |
|---|---|
| number | 数字值，代表图像中像素（如果是光栅图像）或矢量坐标（如果是矢量图像）。 |
| % | 相对于图像尺寸的百分比值：图像的宽度影响水平偏移，高度影响垂直偏移。 |
| fill | 保留边框图像的中间部分。 |
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.borderImageSource=“url(border.png)” |
浏览器支持
- Opera 不支持 border-image-outset 属性。
- Internet Explorer 10 以及更早的版本不支持 border-image-outset 属性。
- Safari 5 以及更早的版本不支持 border-image-outset 属性。
注意:
33.border-image-width
border-image-width 属性规定图像边框的宽度。
div
{
border-image-source: url(border.png);
border-image-width: 30 30;
}
语法:border-image-width: number|%|auto;
| 值 | 描述 |
|---|---|
| number | 代表对应的 border-width 的倍数。 |
| % | 参考边框图像区域的尺寸：区域的高度影响水平偏移，宽度影响垂直偏移。 |
| auto | 如果规定该属性，则宽度为对应的图像切片的固有宽度。 |
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.borderImageWidth=“30 30” |
浏览器支持
- Opera 不支持 border-image-outset 属性。
- Internet Explorer 10 以及更早的版本不支持 border-image-outset 属性。
- Safari 5 以及更早的版本不支持 border-image-outset 属性。
注意:
- border-image-width 属性的四个之规定将边框图像分割为九个部分的偏移。它们代表了从区域的上、右、下、左侧向内的距离。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许任何负值作为 border-image-width 值。
34.box-shadow
box-shadow 属性向框添加一个或多个阴影。
div
{
box-shadow: 10px 10px 5px #888888;
}
语法:box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.boxShadow=“10px 10px 5px #888888” |
浏览器支持
- IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。
注意:
- box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
35.outline
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 简写属性在一个声明中设置所有的轮廓属性。
p
{
outline:#00FF00 dotted thick;
}
语法:box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| outline-color | 规定边框的颜色。 |
| outline-style | 规定边框的样式。 |
| outline-width | 规定边框的宽度。 |
| inherit | 规定应该从父元素继承 outline 属性的设置。 |
| 默认值： | invert none medium |
| 继承性： | no |
| JavaScript 语法： | object.style.outline="#0000FF dotted thin" |
浏览器支持
- 所有浏览器都支持 outline 属性。如果规定了 !DOCTYPE，则 IE8 支持 outline 属性。
注意:
- 轮廓线不会占据空间，也不一定是矩形。
21.outline-color
p
{
outline-style:dotted;
outline-color:#00ff00;
}
语法:
| 值 | 描述 |
|---|---|
| color_name | 规定颜色值为颜色名称的背景颜色（比如 red）。 |
| hex_number | 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。 |
| rgb_number | 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。 |
| invert | 默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。 |
| inherit | 规定应该从父元素继承 background-color 属性的设置。 |
| 默认值： | invert |
| 继承性： | no |
| JavaScript 语法： | object.style.outlineColor="#0000FF" |
浏览器支持
- 所有浏览器都支持 outline 属性。如果规定了 !DOCTYPE，则 IE8 支持 outline 属性。
注意:
- 请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
22.outline-style
outline-style 属性用于设置元素的整个轮廓的样式。样式不能是 none，否则轮廓不会出现。
p
{
outline-style:dotted;
}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.outlineStyle=“dotted” |
浏览器支持
- 所有浏览器都支持 outline 属性。如果规定了 !DOCTYPE，则 IE8 支持 outline 属性。
注意:
- 请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
23.outline-width
border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
p
{
outline-style:dotted;
outline-width:5px;
}
语法:
| 值 | 描述 |
|---|---|
| thin | 定义细的边框。 |
| medium | 默认。定义中等的边框。 |
| thick | 定义粗的边框。 |
| length | 允许您自定义边框的宽度。 |
| inherit | 规定应该从父元素继承边框宽度。 |
| 默认值： | medium |
| 继承性： | no |
| JavaScript 语法： | object.style.outlineWidth=“thin” |
浏览器支持
- 所有浏览器都支持 outline 属性。如果规定了 !DOCTYPE，则 IE8 支持 outline 属性。
注意:
- outline-width 属性设置元素整个轮廓的宽度，只有当轮廓样式不是 none 时，这个宽度才会起作用。如果样式为 none，宽度实际上会重置为 0。不允许设置负长度值。
Box 属性
23.overflow-x
border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
div
{
overflow-x:hidden;
}
语法:overflow-x: visible|hidden|scroll|auto|no-display|no-content;
| 值 | 描述 |
|---|
| 默认值： | visible |
| 继承性： | no |
| JavaScript 语法： | object.style.overflowX=“scroll” |
浏览器支持
- overflow-x 属性无法在 IE8 以及更早的浏览器正确地工作。
注意:
23.overflow-y
div
{
overflow-y:hidden;
}
语法:overflow-y: visible|hidden|scroll|auto|no-display|no-content;
| 值 | 描述 |
|---|
| 默认值： | visible |
| 继承性： | no |
| JavaScript 语法： | object.style.overflowY=“scroll” |
浏览器支持
- overflow-y 属性无法在 IE8 以及更早的浏览器正确地工作。
注意:
24.opacity
div
{
opacity:0.5;
}
语法:opacity: value|inherit;
| 值 | 描述 |
|---|---|
| value | 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 |
| inherit | 应该从父元素继承 opacity 属性的值。 |
| 默认值： | 1 |
| 继承性： | no |
| JavaScript 语法： | object.style.opacity=0.5 |
浏览器支持
- IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。
注意:
CSS 尺寸属性（Dimension）
25.height
这个属性定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。
p
{
height:100px;
width:100px;
}
语法:
| 值 | 描述 |
|---|---|
| auto | 默认。浏览器会计算出实际的高度。 |
| length | 使用 px、cm 等单位定义高度。 |
| % | 基于包含它的块级对象的百分比高度。 |
| inherit | 规定应该从父元素继承 height 属性的值。 |
| 默认值： | auto |
| 继承性： | no |
| JavaScript 语法： | object.style.height=“50px” |
浏览器支持
- 任何版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
26.height
这个属性定义元素内容区的宽度，在内容区外面可以增加内边距、边框和外边距。
p
{
height:100px;
width:100px;
}
语法:
| 值 | 描述 |
|---|---|
| auto | 默认。浏览器会计算出实际的高度。 |
| length | 使用 px、cm 等单位定义高度。 |
| % | 基于包含它的块级对象的百分比高度。 |
| inherit | 规定应该从父元素继承 width 属性的值。 |
| 默认值： | auto |
| 继承性： | no |
| JavaScript 语法： | object.style.width=“50px” |
浏览器支持
- 任何版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
27.max-height
max-height 属性设置元素的最大高度。
p
{
max-height:100px;
}
语法:
| 值 | 描述 |
|---|---|
| auto | 默认。浏览器会计算出实际的高度。 |
| length | 使用 px、cm 等单位定义高度。 |
| % | 基于包含它的块级对象的百分比高度。 |
| inherit | 规定应该从父元素继承 max-height 属性的值。 |
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.maxHeight=“50px” |
浏览器支持
- 任何版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
28.min-height
min-height 属性设置元素的最小高度。
p
{
min-height:100px;
}
语法:
| 值 | 描述 |
|---|---|
| auto | 默认。浏览器会计算出实际的高度。 |
| length | 使用 px、cm 等单位定义高度。 |
| % | 基于包含它的块级对象的百分比高度。 |
| inherit | 规定应该从父元素继承 min-height 属性的值。 |
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.minHeight=“50px” |
浏览器支持
- 任何版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
29.max-width
max-width 属性设置元素的最大宽度。
p
{
max-width:100px;
}
语法:
| 值 | 描述 |
|---|---|
| auto | 默认。浏览器会计算出实际的高度。 |
| length | 使用 px、cm 等单位定义高度。 |
| % | 基于包含它的块级对象的百分比高度。 |
| inherit | 规定应该从父元素继承 max-width 属性的值。 |
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.maxWidth=“50px” |
浏览器支持
- 任何版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
30.min-width
min-width 属性设置元素的最小宽度。
p
{
min-width:100px;
}
语法:
| 值 | 描述 |
|---|---|
| auto | 默认。浏览器会计算出实际的高度。 |
| length | 使用 px、cm 等单位定义高度。 |
| % | 基于包含它的块级对象的百分比高度。 |
| inherit | 规定应该从父元素继承 min-width 属性的值。 |
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.minWidth=“50px” |
浏览器支持
- 任何版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
可伸缩框属性（Flexible Box）
31.box-align
min-width 属性设置元素的最小宽度。
div
{
width:350px;
height:100px;
border:1px solid black;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari、Opera 以及 Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
语法:box-align: start|end|center|baseline|stretch;
| 值 | 描述 |
|---|---|
| 默认值： | stretch |
| 继承性： | no |
| JavaScript 语法： | object.style.boxAlign=“center” |
浏览器支持
- 目前没有浏览器支持 box-align 属性。
- Firefox 支持替代的 -moz-box-align 属性。
- Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性。
注意:
32.box-direction
div
{
width:350px;
height:100px;
border:1px solid black;
/* Firefox */
display:-moz-box;
-moz-box-direction:reverse;
/* Safari、Opera 以及 Chrome */
display:-webkit-box;
-webkit-box-direction:reverse;
/* W3C */
display:box;
box-direction:reverse;
}
语法:box-direction: normal|reverse|inherit;
| 值 | 描述 |
|---|---|
| normal | 以默认方向显示子元素。 |
| reverse | 以反方向显示子元素。 |
| inherit | 应该从子元素继承 box-direction 属性的值 |
| 默认值： | normal |
| 继承性： | no |
| JavaScript 语法： | object.style.boxDirection=“reverse” |
浏览器支持
- 目前没有浏览器支持 box-align 属性。
- Firefox 支持替代的 -moz-box-align 属性。
- Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性。
注意:
32.box-flex
box-flex 属性规定框的子元素是否可伸缩其尺寸。
#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari 和 Chrome */
box-flex:1.0;
border:1px solid red;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari 和 Chrome */
box-flex:2.0;
border:1px solid blue;
}
语法:box-flex: value;
| 值 | 描述 |
|---|---|
| value | 元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。 |
| 默认值： | 0.0 |
| 继承性： | no |
| JavaScript 语法： | object.style.boxFlex=2.0 |
浏览器支持
- 目前没有浏览器支持 box-align 属性。
- Firefox 支持替代的 -moz-box-align 属性。
- Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性。
注意:
- 可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。
33.box-ordinal-group
box-ordinal-group 属性规定框中子元素的显示次序。
.box
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari 和 Chrome */
display:box;
border:1px solid black;
}
.ord1
{
margin:5px;
-moz-box-ordinal-group:1; /* Firefox */
-webkit-box-ordinal-group:1; /* Safari 和 Chrome */
box-ordinal-group:1;
}
.ord2
{
margin:5px;
-moz-box-ordinal-group:2; /* Firefox */
-webkit-box-ordinal-group:2; /* Safari 和 Chrome */
box-ordinal-group:2;
}
语法:box-ordinal-group: integer;
| 值 | 描述 |
|---|---|
| integer | 一个整数，指示子元素的显示次序。 |
| 默认值： | 1 |
| 继承性： | no |
| JavaScript 语法： | object.style.boxOrdinalGroup=2 |
浏览器支持
- 目前没有浏览器支持 box-align 属性。
- Firefox 支持替代的 -moz-box-align 属性。
- Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性。
注意:
- 值更低的元素会显示在值更高的元素前面显示。
- 分组值相同的元素，它们的显示次序取决于其源次序。
33.box-orient
box-orient 属性规定框的子元素应该被水平或垂直排列。
div
{
width:350px;
height:100px;
border:1px solid black;
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
/* Safari、Opera 以及 Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
/* W3C */
display:box;
box-orient:horizontal;
}
语法:box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
| 值 | 描述 |
|---|---|
| 默认值： | inline-axis |
| 继承性： | no |
| JavaScript 语法： | object.style.boxOrient=“vertical” |
浏览器支持
- 目前没有浏览器支持 box-align 属性。
- Firefox 支持替代的 -moz-box-align 属性。
- Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性。
注意:
- 水平框中的子元素从左向右进行显示，而垂直框的子元素从上向下进行显示。不过，box-direction 和 box-ordinal-group 能够改变这种顺序。
34.box-pack
box-pack 属性规定当框大于子元素的尺寸，在何处放置子元素。
div
{
width:350px;
height:100px;
border:1px solid black;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari、Opera 以及 Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
语法:box-pack: start|end|center|justify;
| 值 | 描述 |
|---|---|
| 默认值： | start |
| 继承性： | no |
| JavaScript 语法： | object.style.boxPack=“center” |
浏览器支持
- 目前没有浏览器支持 box-align 属性。
- Firefox 支持替代的 -moz-box-align 属性。
- Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性。
注意:
CSS 字体属性（Font）
34.font
font 简写属性在一个声明中设置所有字体属性。
p.ex1
{
font:italic arial,sans-serif;
}
p.ex2
{
font:italic bold 12px/20px arial,sans-serif;
}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | not specified |
| 继承性： | yes |
| JavaScript 语法： | object.style.font=“italic small-caps bold 12px arial,sans-serif” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
35.font-family
font 简写属性在一个声明中设置所有字体属性。
p
{
font-family:"Times New Roman",Georgia,Serif;
}
语法:
| 值 | 描述 |
|---|---|
| family-name or generic-family | 用于某个元素的字体族名称或/及类族名称的一个优先表。默认值：取决于浏览器。 |
| inherit | 规定应该从父元素继承字体系列。 |
| 默认值： | not specified |
| 继承性： | yes |
| JavaScript 语法： | object.style.fontFamily=“arial,sans-serif” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
有两种类型的字体系列名称：
指定的系列名称：具体字体的名称，比如：“times”、“courier”、“arial”。
通常字体系列名称：比如：“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”
提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。
注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。
36.font-size
font-size 属性可设置字体的尺寸。
h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | medium |
| 继承性： | yes |
| JavaScript 语法： | object.style.fontSize=“larger” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。各关键字对应的字体必须比一个最小关键字相应字体要高，并且要小于下一个最大关键字对应的字体。
36.font-size-adjust
font-size-adjust 属性为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
h1
{
font-size-adjust:0.58;
}
p
{
font-size-adjust:0.60;
}
语法:
| 值 | 描述 |
|---|---|
| none | 默认。如果此字体不可用，则不保持此字体的 x-height。 |
| number | 定义字体的 aspect 值比率。可使用的公式：首选字体的字体尺寸 * （font-size-adjust 值 / 可用字体的 aspect 值）=可应用到可用字体的字体尺寸.举例：如果 14px 的 Verdana（aspect 值是 0.58）不可用，但是某个可用的字体的 aspect 值是 0.46，那么替代字体的尺寸将是 14 * (0.58/0.46) = 17.65px。 |
| 默认值： | none |
| 继承性： | yes |
| JavaScript 语法： | object.style.fontSizeAdjust=“0.70” |
浏览器支持
- Internet Explorer 不支持 font-size-adjust 属性。
注意:
- 字体的小写字母 “x” 的高度与 “font-size” 高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时，那么当此字体被设置为很小的尺寸时会更易阅读。举例：Verdana 的 aspect 值是 0.58（意味着当字体尺寸为 100px 时，它的 x-height 是 58px ）。Times New Roman 的 aspect 值是 0.46。这就意味着 Verdana 在小尺寸时比 Times New Roman 更易阅读。
37.font-style
font-style 属性定义字体的风格。
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
语法:
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
| inherit | 规定应该从父元素继承字体样式。 |
| 默认值： | normal |
| 继承性： | yes |
| JavaScript 语法： | object.style.fontStyle=“italic” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。理论上讲，用户代理可以根据正常字体计算一个斜体字体。
38.font-variant
font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
p.small
{
font-variant:small-caps;
}
语法:
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器显示一个标准的字体。 |
| small-caps | 浏览器会显示小型大写字母的字体。 |
| inherit | 规定应该从父元素继承。 |
| 默认值： | normal |
| 继承性： | yes |
| JavaScript 语法： | object.style.fontVariant=“small-caps” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 该属性主要用于定义小型大写字母文本。理论上，用户代理可以根据正常字体计算出小型大写字母字体。
39.font-weight
font-weight 属性设置文本的粗细。
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
语法:
| 值 | 描述 |
|---|---|
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
| 100 200 300 400 500 600 700 800 900 | 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 |
| inherit | 规定应该从父元素继承字体的粗细。 |
| 默认值： | normal |
| 继承性： | yes |
| JavaScript 语法： | object.style.fontWeight=“900” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键字 normal，700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗。
内容生成（Generated Content）
40.content
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
a:after
{
content: " (" attr(href) ")";
}
语法:
| 值 | 描述 |
|---|---|
| none | |
| normal | |
| content specifications | |
| inherit | 规定应该从父元素继承 content 属性的值。 |
| 默认值： | normal |
| 继承性： | no |
| JavaScript 语法： | object.style.content=“url(beep.wav)” |
浏览器支持
- 如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。
注意:
- 该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。
40.counter-increment
counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
body
{
counter-reset:section;
}
h1
{
counter-reset:subsection;
}
h1:before
{
content:"Section " counter(section) ". ";
counter-increment:section;
}
h2:before
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
语法:
| 值 | 描述 |
|---|---|
| none | 默认。选择器无计数器增量。 |
| id number | id 定义将增加计数的选择器、id 或 class。number 定义增量。number 可以是正数、零或者负数。 |
| inherit | 规定应该从父元素继承 counter-increment 属性的值。 |
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.counterIncrement=“subsection” |
浏览器支持
- 如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 counter-increment 属性。
注意:
- 利用这个属性，计数器可以递增（或递减）某个值，这可以是正值或负值。如果没有提供 number 值，则默认为 1。
- 如果使用了 “display: none”，则无法增加计数。如使用 “visibility: hidden”，则可增加计数。
41.counter-reset
counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
body
{
counter-reset:section;
}
h1
{
counter-reset:subsection;
}
h1:before
{
content:"Section " counter(section) ". ";
counter-increment:section;
}
h2:before
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
语法:
| 值 | 描述 |
|---|---|
| none | 默认。不能对选择器的计数器进行重置。 |
| id number | id 定义将增加计数的选择器、id 或 class。number 定义增量。number 可以是正数、零或者负数。 |
| inherit | 规定应该从父元素继承 counter-reset 属性的值。 |
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.counterReset=“subsection” |
浏览器支持
- 如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 counter-increment 属性。
注意:
- counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
- 利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。
- 如果使用 “display: none”，则无法重置计数器。如果使用 “visibility: hidden”，则可以重置计数器。
42.quotes
quotes 属性设置嵌套引用（embedded quotation）的引号类型。
q:lang(en)
{
quotes: '"' '"' "'" "'";
}
//HTML 代码：
<html lang="en">
<head>
</head>
<body>
<p><q>This is a <q>big</q> quote</q></p>
</body>
</html>
//输出：
"This is a 'big' quote"
语法:
| 值 | 描述 |
|---|---|
| none | 规定 “content” 属性的 “open-quote” 和 “close-quote” 的值不会产生任何引号。 |
| string string string string | 定义要使用的引号。前两个值规定第一级引用嵌套，后两个值规定下一级引号嵌套。 |
| inherit | 规定应该从父元素继承 quotes 属性的值。 |
| 默认值： | not specified |
| 继承性： | no |
| JavaScript 语法： | object.style.quotes=“none” |
浏览器支持
- 如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 counter-increment 属性。
注意:
CSS 列表属性（List）
43.list-style
list-style 简写属性在一个声明中设置所有的列表属性。
ul
{
list-style:square inside url('/i/arrow.gif');
}
语法:
| 值 | 描述 |
|---|---|
| list-style-type | 设置列表项标记的类型。 |
| list-style-position | 设置在何处放置列表项标记。 |
| list-style-image | 使用图像来替换列表项的标记。 |
| inherit | 规定应该从父元素继承 list-style 属性的值。 |
| 默认值： | disc outside none |
| 继承性： | yes |
| JavaScript 语法： | object.style.listStyle=“decimal inside” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。
44.list-style-image
list-style-image 属性使用图像来替换列表项的标记。
ul
{
list-style-image:url("/i/arrow.gif");
list-style-type:square;
}
语法:
| 值 | 描述 |
|---|---|
| URL | 图像的路径。 |
| none | 默认。无图形被显示。 |
| inherit | 规定应该从父元素继承 list-style-image 属性的值。 |
| 默认值： | none |
| 继承性： | yes |
| JavaScript 语法： | object.style.listStyleImage=“url(’/images/blueball.gif’)” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 请始终规定一个 “list-style-type” 属性以防图像不可用。
- 这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。
45.list-style-position
list-style-position 属性设置在何处放置列表项标记。
ul
{
list-style-position:inside;
}
语法:
| 值 | 描述 |
|---|---|
| inside | 列表项目标记放置在文本以内，且环绕文本根据标记对齐。 |
| outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐 |
| inherit | 规定应该从父元素继承 list-style-position 属性的值。 |
| 默认值： | outside |
| 继承性： | yes |
| JavaScript 语法： | object.style.listStylePosition=“inside” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。
46.list-style-type
list-style-type 属性设置列表项标记的类型。
ul.circle {list-style-type:circle;}
ul.square {list-style-type:square;}
ol.upper-roman {list-style-type:upper-roman;}
ol.lower-alpha {list-style-type:lower-alpha;}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | disc |
| 继承性： | yes |
| JavaScript 语法： | object.style.listStyleType=“square” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “decimal-leading-zero”、“lower-greek”、“lower-latin”、“upper-latin”、“armenian”、“georgian” 或 “inherit”。
注意:
- 该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。
47.margin
list-style-type 属性设置列表项标记的类型。
p
{
margin:2cm 4cm 3cm 4cm;
margin:10px 5px 15px 20px;
margin:10px 5px 15px;
margin:10px 5px;
margin:10px;
}
语法:
| 值 | 描述 |
|---|---|
| auto | 浏览器计算外边距。 |
| length | 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的外边距。 |
| inherit | 规定应该从父元素继承外边距。 |
| 默认值： | 0 |
| 继承性： | no |
| JavaScript 语法： | object.style.margin=“10px 5px” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
48.margin-top
p
{
margin-top:2cm;
}
语法:
| 值 | 描述 |
|---|---|
| auto | 浏览器计算外边距。 |
| length | 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的外边距。 |
| inherit | 规定应该从父元素继承外边距。 |
| 默认值： | 0 |
| 继承性： | no |
| JavaScript 语法： | object.style.marginTop=“10px” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
49.padding
p
{
padding:2cm 4cm 3cm 4cm;
padding:10px 5px 15px 20px;
padding:10px 5px 15px;
padding:10px 5px;
padding:10px;
}
语法:
| 值 | 描述 |
|---|---|
| auto | 浏览器计算外边距。 |
| length | 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的外边距。 |
| inherit | 规定应该从父元素继承外边距。 |
| 默认值： | 0 |
| 继承性： | no |
| JavaScript 语法： | object.style.padding=“10px 5px” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
50.padding-top
p
{
padding-top:2cm;
}
语法:
| 值 | 描述 |
|---|---|
| length | 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的外边距。 |
| inherit | 规定应该从父元素继承外边距。 |
| 默认值： | 0 |
| 继承性： | no |
| JavaScript 语法： | object.style.paddingTop=“10px” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负内边距值。
多列属性（Multi-column）
51.column-count
column-count 属性规定元素应该被划分的列数。
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}
语法:column-count: number|auto;
| 值 | 描述 |
|---|---|
| number | 元素内容将被划分的最佳列数。 |
| auto | 由其他属性决定列数，比如 “column-width”。 |
| 默认值： | auto |
| 继承性： | no |
| JavaScript 语法： | object.style.columnCount=3 |
浏览器支持
- Internet Explorer 10 和 Opera 支持 column-count 属性。
- Firefox 支持替代的 -moz-column-count 属性。
- Safari 和 Chrome 支持替代的 -webkit-column-count 属性。
- Internet Explorer 9 以及更早版本的浏览器不支持 column-count 属性。
注意:
- 该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负内边距值。
52.column-fill
column-count 属性规定元素应该被划分的列数。
div
{
column-fill:auto;
}
语法:column-fill: balance|auto;
| 值 | 描述 |
|---|---|
| balance | 对列进行协调。浏览器应对列长度的差异进行最小化处理。 |
| auto | 按顺序对列进行填充，列长度会各有不同。 |
| 默认值： | balance |
| 继承性： | no |
| JavaScript 语法： | object.style.columnFill=“auto” |
浏览器支持
- 主流浏览器都不支持 column-fill 属性。
注意:
- 该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负内边距值。
52.column-gap
column-gap 属性规定列之间的间隔。
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}
语法:column-gap: length|normal;
| 值 | 描述 |
|---|---|
| length | 把列间的间隔设置为指定的长度。 |
| normal | 规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。 |
| 默认值： | normal |
| 继承性： | no |
| JavaScript 语法： | object.style.columnGap=“40px” |
浏览器支持
- Internet Explorer 10 和 Opera 支持 column-gap 属性。
- Firefox 支持替代的 -moz-column-gap 属性。
- Safari 和 Chrome 支持替代的 -webkit-column-gap 属性。
- Internet Explorer 9 以及更早版本的浏览器不支持 column-gap 属性。
注意:
- 如果列之间设置了 column-rule，它会在间隔中间显示。
52.column-rule
column-gap 属性规定列之间的间隔。
div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari 和 Chrome */
column-rule:3px outset #ff00ff;
}
语法:column-rule: column-rule-width column-rule-style column-rule-color;
| 值 | 描述 |
|---|---|
| column-rule-width | 设置列之间的宽度规则。 |
| column-rule-style | 设置列之间的样式规则。 |
| column-rule-color | 设置列之间的颜色规则。 |
| 默认值： | medium none black |
| 继承性： | no |
| JavaScript 语法： | object.columnRule=“3px outset #ff00ff” |
浏览器支持
- Internet Explorer 10 和 Opera 支持 column-gap 属性。
- Firefox 支持替代的 -moz-column-gap 属性。
- Safari 和 Chrome 支持替代的 -webkit-column-gap 属性。
- Internet Explorer 9 以及更早版本的浏览器不支持 column-gap 属性。
注意:
- column-rule 属性是一个简写属性，用于设置所有 column-rule-* 属性。
53.column-rule-color
column-gap 属性规定列之间的间隔。
div
{
-moz-column-rule-color:#ff0000; /* Firefox */
-webkit-column-rule-color:#ff0000; /* Safari 和 Chrome */
column-rule-color:#ff0000;
}
语法:column-rule-color: color;
| 值 | 描述 |
|---|---|
| color | 规定颜色规则。 |
| 默认值： | black |
| 继承性： | no |
| JavaScript 语法： | object.style.columnRuleColor="#ff00ff" |
浏览器支持
- Internet Explorer 10 和 Opera 支持 column-gap 属性。
- Firefox 支持替代的 -moz-column-gap 属性。
- Safari 和 Chrome 支持替代的 -webkit-column-gap 属性。
- Internet Explorer 9 以及更早版本的浏览器不支持 column-gap 属性。
注意:
- column-rule 属性是一个简写属性，用于设置所有 column-rule-* 属性。
54.column-rule-style
column-gap 属性规定列之间的间隔。
div
{
-moz-column-rule-style:dotted; /* Firefox */
-webkit-column-rule-style:dotted; /* Safari 和 Chrome */
column-rule-style:dotted;
}
语法:column-rule-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
| 值 | 描述 |
|---|
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.columnRuleStyle=“dotted” |
浏览器支持
- Internet Explorer 10 和 Opera 支持 column-gap 属性。
- Firefox 支持替代的 -moz-column-gap 属性。
- Safari 和 Chrome 支持替代的 -webkit-column-gap 属性。
- Internet Explorer 9 以及更早版本的浏览器不支持 column-gap 属性。
注意:
55.column-rule-width
div
{
-moz-column-rule-width:1px; /* Firefox */
-webkit-column-rule-width:1px; /* Safari 和 Chrome */
column-rule-width:1px;
}
语法:column-rule-width: thin|medium|thick|length;
| 值 | 描述 |
|---|---|
| thin | 定义纤细规则。 |
| medium | 定义中等规则。 |
| thick | 定义宽厚规则。 |
| length | 规定规则的宽度。 |
| 默认值： | medium |
| 继承性： | no |
| JavaScript 语法： | object.style.columnRuleWidth=“thin” |
浏览器支持
- Internet Explorer 10 和 Opera 支持 column-gap 属性。
- Firefox 支持替代的 -moz-column-gap 属性。
- Safari 和 Chrome 支持替代的 -webkit-column-gap 属性。
- Internet Explorer 9 以及更早版本的浏览器不支持 column-gap 属性。
注意:
56.column-span
h2
{
-webkit-column-span:all; /* Chrome */
column-span:all;
}
语法:column-span: 1|all;
| 值 | 描述 |
|---|---|
| 1 | 元素应横跨一列。 |
| all | 元素应横跨所有列。 |
| 默认值： | 1 |
| 继承性： | no |
| JavaScript 语法： | object.style.columnSpan=“all” |
浏览器支持
- Internet Explorer 10 和 Opera 支持 column-gap 属性。
- Firefox 支持替代的 -moz-column-gap 属性。
- Safari 和 Chrome 支持替代的 -webkit-column-gap 属性。
- Internet Explorer 9 以及更早版本的浏览器不支持 column-gap 属性。
注意:
57.column-width
div
{
column-width:100px;
-moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* Safari 和 Chrome */
}
语法:column-width: auto|length;
| 值 | 描述 |
|---|---|
| auto | 由浏览器决定列宽。 |
| length | 规定列的宽度。 |
| 默认值： | auto |
| 继承性： | no |
| JavaScript 语法： | object.style.columnWidth=“100px” |
浏览器支持
- Internet Explorer 10 和 Opera 支持 column-gap 属性。
- Firefox 支持替代的 -moz-column-gap 属性。
- Safari 和 Chrome 支持替代的 -webkit-column-gap 属性。
- Internet Explorer 9 以及更早版本的浏览器不支持 column-gap 属性。
注意:
58.columns
div
{
columns:100px 3;
-moz-columns:100px 3; /* Firefox */
-webkit-columns:100px 3; /* Safari 和 Chrome */
}
语法:columns: column-width column-count;
| 值 | 描述 |
|---|---|
| column-width | 列的宽度。 |
| column-count | 列数。 |
| 默认值： | auto auto |
| 继承性： | no |
| JavaScript 语法： | object.style.columns=“100px 3” |
浏览器支持
- Internet Explorer 10 和 Opera 支持 column-gap 属性。
- Firefox 支持替代的 -moz-column-gap 属性。
- Safari 和 Chrome 支持替代的 -webkit-column-gap 属性。
- Internet Explorer 9 以及更早版本的浏览器不支持 column-gap 属性。
注意:
CSS 定位属性（Positioning）
59.bottom
img
{
position:absolute;
bottom:5px;
}
语法:
| 值 | 描述 |
|---|---|
| auto | 默认值。通过浏览器计算底部的位置。 |
| % | 设置以包含元素的百分比计的底边位置。可使用负值。 |
| length | 使用 px、cm 等单位设置元素的底边位置。可使用负值。 |
| inherit | 规定应该从父元素继承 bottom 属性的值。 |
| 默认值： | auto |
| 继承性： | no |
| JavaScript 语法： | object.style.bottom=“50px” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 对于相对定义元素，如果 bottom 和 top 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。
60.clear
img
{
float:left;
clear:both;
}
语法:
| 值 | 描述 |
|---|---|
| none | 默认值。允许浮动元素出现在两侧。 |
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| inherit | 规定应该从父元素继承属性的值。 |
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.clear=“left” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 对于相对定义元素，如果 bottom 和 top 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。
61.clip
clip 属性剪裁绝对定位元素。允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
语法:
| 值 | 描述 |
|---|---|
| shape | 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left) |
| auto | 默认值。不应用任何剪裁。 |
| inherit | 规定应该从父元素继承 clip 属性的值。 |
| 默认值： | auto |
| 继承性： | no |
| JavaScript 语法： | object.style.clip=“rect(0px,50px,50px,0px)” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。
62.cursor
span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | auto |
| 继承性： | yes |
| JavaScript 语法： | object.style.cursor=“crosshair” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。\
- Opera 9.3 和 Safari 3 不支持 url 值。
注意:
63.display
p.inline
{
display:inline;
}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | auto |
| 继承性： | yes |
| JavaScript 语法： | object.style.cursor=“crosshair” |
浏览器支持
- 如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 “inline-table”、“run-in”、“table”、“table-caption”、“table-cell”、“table-column”、“table-column-group”、“table-row”、“table-row-group”、以及 “inherit”。
注意:
- 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
64.float
img
{
float:right;
}
语法:
| 值 | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.cssFloat=“left” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
64.overflow
div
{
width:150px;
height:150px;
overflow:scroll;
}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | visible |
| 继承性： | no |
| JavaScript 语法： | object.style.overflow=“scroll” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
65.position
h2
{
position:absolute;
left:100px;
top:150px;
}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | static |
| 继承性： | no |
| JavaScript 语法： | object.style.position=“absolute” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
66.vertical-align
img
{
vertical-align:text-top;
}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | baseline |
| 继承性： | no |
| JavaScript 语法： | object.style.verticalAlign=“bottom” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
67.visibility
h2
{
visibility:hidden;
}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | visible |
| 继承性： | yes |
| JavaScript 语法： | object.style.visibility=“hidden” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持 “inherit” 和 “collapse” 属性值。
注意:
- 即使不可见的元素也会占据页面上的空间。请使用 “display” 属性来创建不占据页面空间的不可见元素。
68.z-index
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
语法:
| 值 | 描述 |
|---|---|
| auto | 默认。堆叠顺序与父元素相等。 |
| number | 设置元素的堆叠顺序。 |
| inherit | 规定应该从父元素继承 z-index 属性的值。 |
| 默认值： | auto |
| 继承性： | no |
| JavaScript 语法： | object.style.zIndex=“1” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持 “inherit” 和 “collapse” 属性值。
注意:
- 元素可拥有负的 z-index 属性值。
- Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
CSS 打印属性（Print）
69.page-break-after
page-break-after 属性设置元素后的 page-breaking 行为。
应用于：position 值为 relative 或 static 的非浮动块级元素。
<html>
<head>
<style>
@media print
{
table {page-break-after:always;}
}
</style>
</head>
<body>
....
</body>
</html>
语法:
| 值 | 描述 |
|---|---|
| 默认值： | auto |
| 继承性： | no |
| JavaScript 语法： | object.style.pageBreakAfter=“always” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “left”、“right” 以及 “inherit”。
- Firefox、Chrome 以及 Safari 不支持属性值 “avoid”、“left” 以及 “right”。
注意:
- 请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。
- 尽管可以用 always 强制放上分页符，但是无法保证避免分页符的插入，创作人员最多只能要求用户代理尽可能避免插入分页。
CSS 表格属性（Table）
70.border-collapse
border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。
table
{
border-collapse:collapse;
}
语法:
| 值 | 描述 |
|---|---|
| separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
| inherit | 规定应该从父元素继承 border-collapse 属性的值。 |
| 默认值： | separate |
| 继承性： | yes |
| JavaScript 语法： | object.style.borderCollapse=“collapse” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
- 如果没有规定 !DOCTYPE，则 border-collapse 可能产生意想不到的结果。
注意:
71.border-spacing
border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。
table
{
border-collapse:separate;
border-spacing:10px 50px;
}
语法:
| 值 | 描述 |
|---|---|
| length length | 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。 |
| inherit | 规定应该从父元素继承 border-spacing 属性的值。 |
| 默认值： | not specified |
| 继承性： | yes |
| JavaScript 语法： | object.style.borderSpacing=“15px” |
浏览器支持
- 如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 border-spacing 属性。
- 某些版本的IE浏览器不支持此属性。
注意:
- 该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。
72.caption-side
caption-side 属性设置表格标题的位置。
caption
{
caption-side:bottom;
}
语法:
| 值 | 描述 |
|---|---|
| top | 默认值。把表格标题定位在表格之上。 |
| bottom | 把表格标题定位在表格之下。 |
| inherit | 规定应该从父元素继承属性的值。 |
| 默认值： | top |
| 继承性： | yes |
| JavaScript 语法： | object.style.captionSide=“bottom” |
浏览器支持
- 如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 caption-side 属性。
注意:
- 该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。
73.empty-cells
empty-cells 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。
table
{
border-collapse:separate;
empty-cells:hide;
}
语法:
| 值 | 描述 |
|---|---|
| hide | 不在空单元格周围绘制边框。 |
| show | 在空单元格周围绘制边框。默认。 |
| inherit | 规定应该从父元素继承属性的值。 |
| 默认值： | show |
| 继承性： | yes |
| JavaScript 语法： | object.style.emptyCells=“hide” |
浏览器支持
- 某些版本的 IE 浏览器不支持此属性。
注意:
- 该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。
74.table-layout
tableLayout 属性用来显示表格单元格、行、列的算法规则。
table
{
table-layout:fixed;
}
语法:
| 值 | 描述 |
|---|---|
| automatic | 默认。列宽度由单元格内容设定。 |
| fixed | 列宽由表格宽度和列宽度设定。 |
| inherit | 规定应该从父元素继承属性的值。 |
| 默认值： | auto |
| 继承性： | yes |
| JavaScript 语法： | object.style.tableLayout=“fixed” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
定义和用法
tableLayout 属性用来显示表格单元格、行、列的算法规则。
固定表格布局：
固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。
在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。
通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。
自动表格布局：
在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。
此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。
说明
该属性指定了完成表布局时所用的布局算法。固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的 HTML 表。
2D/3D 转换属性（Transform）
75.transform
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}
语法:transform: none|transform-functions;
| 值 | 描述 |
|---|---|
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.transform=“rotate(7deg)” |
浏览器支持
- Internet Explorer 10、Firefox、Opera 支持 transform 属性。
- Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
- Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
- Opera 只支持 2D 转换。
注意:
76.transform-origin
transform-origin 属性允许您改变被转换元素的位置。
div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari 和 Chrome */
-webkit-transform-origin:20% 40%; /* Safari 和 Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}
语法:transform-origin: x-axis y-axis z-axis;
| 值 | 描述 |
|---|---|
| 默认值： | 50% 50% 0 |
| 继承性： | no |
| JavaScript 语法： | object.style.transformOrigin=“20% 40%” |
浏览器支持
- Internet Explorer 10、Firefox、Opera 支持 transform 属性。
- Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
- Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
- Opera 只支持 2D 转换。
注意:
- 该属性必须与 transform 属性一同使用。
77.transform-style
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari 和 Chrome */
-webkit-transform-style: preserve-3d; /* Safari 和 Chrome */
}
语法:transform-style: flat|preserve-3d;
| 值 | 描述 |
|---|---|
| flat | 子元素将不保留其 3D 位置。 |
| preserve-3d | 子元素将保留其 3D 位置。 |
| 默认值： | flat |
| 继承性： | no |
| JavaScript 语法： | object.style.transformStyle=“preserve-3d” |
浏览器支持
- Firefox 支持 transform-style 属性。
- Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性。
注意:
- 该属性必须与 transform 属性一同使用。
78.perspective
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}
语法:perspective: number|none;
| 值 | 描述 |
|---|---|
| number | 元素距离视图的距离，以像素计。 |
| none | 默认值。与 0 相同。不设置透视。 |
| 默认值： | none |
| 继承性： | yes |
| JavaScript 语法： | object.style.perspective=500 |
浏览器支持
- 目前浏览器都不支持 perspective 属性。
- Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
注意:
- 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
- perspective 属性只影响 3D 转换元素。
- 请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。
79.perspective-origin
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
div
{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150; /* Safari 和 Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari 和 Chrome */
}
语法:perspective-origin: x-axis y-axis;
| 值 | 描述 |
|---|---|
| 默认值： | 50% 50% |
| 继承性： | no |
| JavaScript 语法： | object.style.perspectiveOrigin=“10% 10%” |
浏览器支持
- 目前浏览器都不支持 perspective 属性。
- Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
注意:
- 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
- perspective 属性只影响 3D 转换元素。
- 请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。
80.backface-visibility
backface-visibility 属性定义当元素不面向屏幕时是否可见。
div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome 和 Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
}
语法:backface-visibility: visible|hidden;
| 值 | 描述 |
|---|---|
| visible | 背面是可见的。 |
| hidden | 背面是不可见的。 |
| 默认值： | visible |
| 继承性： | no |
| JavaScript 语法： | object.style.backfaceVisibility=“hidden” |
浏览器支持
- 只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性。
- Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性。
注意:
- 如果在旋转元素不希望看到其背面时，该属性很有用。
过渡属性（Transition）
81.transition
div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
语法:transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
| 默认值： | all 0 ease 0 |
| 继承性： | no |
| JavaScript 语法： | object.style.transition=“width 2s” |
浏览器支持
- Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
- Safari 支持替代的 -webkit-transition 属性。
- Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
注意:
- 请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
82.transition-property
transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。
div
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari 和 Chrome */
-o-transition-property:width; /* Opera */
}
语法:transition-property: none|all|property;
| 值 | 描述 |
|---|---|
| none | 没有属性会获得过渡效果。 |
| all | 所有属性会获得过渡效果。 |
| property | 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。 |
| 默认值： | all |
| 继承性： | no |
| JavaScript 语法： | object.style.transitionProperty=“width,height” |
浏览器支持
- Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
- Safari 支持替代的 -webkit-transition 属性。
- Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
注意:
- 请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
- 过渡效果通常在用户将鼠标指针浮动到元素上时发生
83.transition-duration
transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。
div
{
transition-duration: 5s;
-moz-transition-duration: 5s; /* Firefox 4 */
-webkit-transition-duration: 5s; /* Safari 和 Chrome */
-o-transition-duration: 5s; /* Opera */
}
语法:transition-duration: time;
| 值 | 描述 |
|---|---|
| time | 规定完成过渡效果需要花费的时间（以秒或毫秒计） |
| 默认值： | 0 |
| 继承性： | no |
| JavaScript 语法： | object.style.transitionDuration=“5s” |
浏览器支持
- Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
- Safari 支持替代的 -webkit-transition 属性。
- Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
注意:
- 请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
84.transition-timing-function
transition-timing-function 属性规定过渡效果的速度曲线。
div
{
transition-duration: 5s;
-moz-transition-duration: 5s; /* Firefox 4 */
-webkit-transition-duration: 5s; /* Safari 和 Chrome */
-o-transition-duration: 5s; /* Opera */
}
语法:transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
| 值 | 描述 |
|---|---|
| 默认值： | ease |
| 继承性： | no |
| JavaScript 语法： | object.style.transitionTimingFunction=“linear” |
浏览器支持
- Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
- Safari 支持替代的 -webkit-transition 属性。
- Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
注意:
85.transition-delay
transition-delay 属性规定过渡效果何时开始。
div
{
transition-delay: 2s;
-moz-transition-delay: 2s; /* Firefox 4 */
-webkit-transition-delay: 2s; /* Safari 和 Chrome */
-o-transition-delay: 2s; /* Opera */
}
语法:transition-delay: time;
| 值 | 描述 |
|---|---|
| time | 规定完成过渡效果需要花费的时间（以秒或毫秒计） |
| 默认值： | 0 |
| 继承性： | no |
| JavaScript 语法： | object.style.transitionDelay=“2s” |
浏览器支持
- Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
- Safari 支持替代的 -webkit-transition 属性。
- Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
注意:
用户界面属性（User-interface）
86.appearance
appearance 属性允许您使元素看上去像标准的用户界面元素。
div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}
语法:appearance: normal|icon|window|button|menu|field;
| 值 | 描述 |
|---|---|
| time | 规定完成过渡效果需要花费的时间（以秒或毫秒计） |
| 默认值： | normal |
| 继承性： | no |
| JavaScript 语法： | object.style.appearance=“button” |
浏览器支持
- 所有主流浏览器都不支持 appearance 属性。
- Firefox 支持替代的 -moz-appearance 属性。
- Safari 和 Chrome 支持替代的 -webkit-appearance 属性。
注意:
87.box-sizing
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
语法:appearance: normal|icon|window|button|menu|field;
| 值 | 描述 |
|---|---|
| time | 规定完成过渡效果需要花费的时间（以秒或毫秒计） |
| 默认值： | content-box |
| 继承性： | no |
| JavaScript 语法： | object.style.boxSizing=“border-box” |
浏览器支持
- 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
注意:
88.outline-offset
outline-offset 属性对轮廓进行偏移，并在边框边缘进行绘制。
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
语法:outline-offset: length|inherit;
| 值 | 描述 |
|---|---|
| length | 轮廓与边框边缘的距离。 |
| inherit | 规定应从父元素继承 outline-offset 属性的值。 |
| 默认值： | 0 |
| 继承性： | no |
| JavaScript 语法： | object.style.outlineOffset=“15px” |
浏览器支持
- 所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer。
注意:
89.resize
resize 属性规定是否可由用户调整元素的尺寸。
div
{
resize:both;
overflow:auto;
}
语法:resize: none|both|horizontal|vertical;
| 值 | 描述 |
|---|---|
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.resize=“both” |
浏览器支持
- Firefox 4+、Chrome 以及 Safari 不支持 resize。
注意:
- 如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。
CSS 文本属性（Text）
90.color
color 属性规定文本的颜色。
body
{
color:red;
}
h1
{
color:#00ff00;
}
p
{
color:rgb(0,0,255);
}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | not specified |
| 继承性： | yes |
| JavaScript 语法： | object.style.color="#FF0000" |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 这个属性设置了一个元素的前景色（在 HTML 表现中，就是元素文本的颜色）；光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖。
- 要设置一个元素的前景色，最容易的方法是使用 color 属性。
91.direction
direction 属性规定文本的方向 / 书写方向。
div
{
direction: rtl
}
语法:
| 值 | 描述 |
|---|---|
| ltr | 默认。文本方向从左到右。 |
| rtl | 文本方向从右到左。 |
| inherit | 规定应该从父元素继承 direction 属性的值。 |
| 默认值： | ltr |
| 继承性： | yes |
| JavaScript 语法： | object.style.direction=“rtl” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。
92.letter-spacing
letter-spacing 属性增加或减少字符间的空白（字符间距）。
h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}
语法:
| 值 | 描述 |
|---|---|
| normal | 默认。规定字符间没有额外的空间。 |
| length | 定义字符间的固定空间（允许使用负值）。 |
| inherit | 规定应该从父元素继承 letter-spacing 属性的值。 |
| 默认值： | normal |
| 继承性： | yes |
| JavaScript 语法： | object.style.letterSpacing=“3px” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。
- 允许使用负值，这会让字母之间挤得更紧。
93.line-height
line-height 属性设置行间的距离（行高）。
p.small {line-height:90%}
p.big {line-height:200%}
语法:
| 值 | 描述 |
|---|---|
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
| normal | 默认。设置合理的行间距。 |
| length | 设置固定的行间距。 |
| % | 基于当前字体尺寸的百分比行间距。 |
| inherit | 规定应该从父元素继承属性的值。 |
| 默认值： | normal |
| 继承性： | yes |
| JavaScript 语法： | object.style.lineHeight=“2” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 不允许使用负值。
- 该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
- line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
- 原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。
94.text-align
line-height 属性设置行间的距离（行高）。
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | 如果 direction 属性是 ltr，则默认值是 left；如果 direction 是 rtl，则为 right。 |
| 继承性： | yes |
| JavaScript 语法： | object.style.textAlign=“right” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。
95.text-decoration
text-decoration 属性规定添加到文本的修饰。
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | none |
| 继承性： | no |
| JavaScript 语法： | object.style.textDecoration=“overline” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
- IE、Chrome 或 Safari 不支持 “blink” 属性值。
注意:
- 这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。
95.text-indent
text-indent 属性规定文本块中首行文本的缩进。
p
{
text-indent:50px;
}
语法:
| 值 | 描述 |
|---|---|
| length | 定义固定的缩进。默认值：0。 |
| % | 定义基于父元素宽度的百分比的缩进。 |
| inherit | 规定应该从父元素继承 text-indent 属性的值。 |
| 默认值： | not specified |
| 继承性： | yes |
| JavaScript 语法： | object.style.textIndent=“50px” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 允许使用负值。如果使用负值，那么首行会被缩进到左边。
- 在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值。
96.text-transform
text-transform 属性控制文本的大小写。
h1 {text-transform:uppercase}
h2 {text-transform:capitalize}
p {text-transform:lowercase}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | none |
| 继承性： | yes |
| JavaScript 语法： | object.style.textTransform=“uppercase” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。如果值为 capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于用户代理如何识别出各个“词”。
- 不同的用户代理可能会用不同的方法来确定单词从哪里开始，相应地确定哪些字母要大写。例如，文本 “w3-school” 可以用两种方式显示：“W3-school” 和 “W3-School”。CSS 并没有规定哪一种是正确的，所以这两种都是可以的。
97.unicode-bidi
unicode-bidi 属性设置文本的方向。
h1 {text-transform:uppercase}
h2 {text-transform:capitalize}
p {text-transform:lowercase}
语法:
| 值 | 描述 |
|---|---|
| normal | 元素不会对双向算法打开附加的一层嵌套。对于行内元素，顺序的隐式重排会跨元素边界进行。 |
| embed | 如果是一个行内元素，这个值对于双向算法会打开附件的一层嵌套。这个嵌套层的方向由 direction 属性指定。会在元素内部隐式地完成顺序重排。这对应于在元素开始处增加一个 LRE（对于 direction:ltr ：U+202A）或 RLE（对于 direction:rtl ：U+202B），并在元素的最后增加一个 PDF（U+202C）。 |
| bidi-override | 这会为行内元素创建一个覆盖。对于块级元素，将为不在另一块中的行内后代创建一个覆盖。这说明，顺序重排在元素内部严格按照 direction 属性进行；忽略了双向算法的隐式部分。这对应于在元素开始处增加一个 LRO（对于 direction:ltr ：U+202D）或 RLO（对于 direction:rtl ：U+202E），并在元素最后增加一个 PDF（U+202C）。 |
| 继承性： | yes |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 尽管 CSS 试图处理书写方向，但 Unicode 有一种更健壮的方式来处理方向性。利用属性 unicode-bidi，CSS 创作人员可以充分利用 Unicode 的某些功能。
98.white-space
white-space 属性设置如何处理元素内的空白。
p
{
white-space: nowrap
}
语法:
| 值 | 描述 |
|---|---|
| 默认值： | normal |
| 继承性： | yes |
| JavaScript 语法： | object.style.whiteSpace=“pre” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。如果值为 capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于用户代理如何识别出各个“词”。
- 不同的用户代理可能会用不同的方法来确定单词从哪里开始，相应地确定哪些字母要大写。例如，文本 “w3-school” 可以用两种方式显示：“W3-school” 和 “W3-School”。CSS 并没有规定哪一种是正确的，所以这两种都是可以的。
99.word-spacing
word-spacing 属性增加或减少单词间的空白（即字间隔）。
p
{
word-spacing:25px;
}
语法:
| 值 | 描述 |
|---|---|
| normal | 默认。定义单词间的标准空间。 |
| length | 定义单词间的固定空间。 |
| inherit | 规定应该从父元素继承 word-spacing 属性的值。 |
| 默认值： | normal |
| 继承性： | yes |
| JavaScript 语法： | object.style.wordSpacing=“10px” |
浏览器支持
- 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
注意:
- 该属性定义元素中字之间插入多少空白符。针对这个属性，“字” 定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔；所以，normal 就等同于设置为 0。允许指定负长度值，这会让字之间挤得更紧。
- 允许使用负值。
- CSS 把“字（word）”定义为任何非空白符字符组成的串，并由某种空白字符包围。这个定义没有实际的语义，它只是假设一个文档包含由一个或多个空白字符包围的字。支持 CSS 的用户代理不一定能确定一个给定语言中哪些是合法的字，而哪些不是。尽管这个定义没有多大价值，不过它意味着采用象形文字的语言或非罗马书写体往往无法指定字间隔。
- 利用这个属性，可能会创建字间隔太宽的文档，所以，使用 word-spacing 时要小心。
100.text-overflow
word-spacing 属性增加或减少单词间的空白（即字间隔）。
div.test
{
text-overflow:ellipsis;
}
语法:text-overflow: clip|ellipsis|string;
| 值 | 描述 |
|---|---|
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
| string | 使用给定的字符串来代表被修剪的文本。 |
| 默认值： | clip |
| 继承性： | no |
| JavaScript 语法： | object.style.textOverflow=“ellipsis” |
浏览器支持
注意:
- 该属性定义元素中字之间插入多少空白符。针对这个属性，“字” 定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔；所以，normal 就等同于设置为 0。允许指定负长度值，这会让字之间挤得更紧。
- 允许使用负值。
- CSS 把“字（word）”定义为任何非空白符字符组成的串，并由某种空白字符包围。这个定义没有实际的语义，它只是假设一个文档包含由一个或多个空白字符包围的字。支持 CSS 的用户代理不一定能确定一个给定语言中哪些是合法的字，而哪些不是。尽管这个定义没有多大价值，不过它意味着采用象形文字的语言或非罗马书写体往往无法指定字间隔。
- 利用这个属性，可能会创建字间隔太宽的文档，所以，使用 word-spacing 时要小心。
101.text-shadow
word-spacing 属性增加或减少单词间的空白（即字间隔）。
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
语法:text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
| 默认值： | none |
| 继承性： | yes |
| JavaScript 语法： | object.style.textShadow=“2px 2px #ff0000” |
浏览器支持
- Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。
注意:
- text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
102.word-break
word-break 属性规定自动换行的处理方法。
p.test {word-break:hyphenate;}
语法:word-break: normal|break-all|keep-all;
| 值 | 描述 |
|---|---|
| normal | 使用浏览器默认的换行规则。 |
| break-all | 允许在单词内换行。 |
| keep-all | 只能在半角空格或连字符处换行。 |
| 默认值： | normal |
| 继承性： | yes |
| JavaScript 语法： | object.style.wordBreak=“keep-all” |
浏览器支持
注意:
- text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
103.word-wrap
word-wrap 属性允许长单词或 URL 地址换行到下一行。
p.test {word-wrap:break-word;}
语法:word-wrap: normal|break-word;
| 值 | 描述 |
|---|---|
| normal | 只在允许的断字点换行（浏览器保持默认处理）。 |
| break-word | 在长单词或 URL 地址内部进行换行。 |
| 默认值： | normal |
| 继承性： | yes |
| JavaScript 语法： | object.style.wordWrap=“break-word” |
浏览器支持
注意:
- text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。