本文详细介绍了 CSS3 中的关键属性，包括 background-size、white-space、transition、text-shadow、border-image、box-shadow 和 transform。这些属性可以用来增强网页的表现力，如设置背景图像尺寸、文本换行规则、过渡效果、文本阴影、边框图像、盒子阴影及元素转换等。
规定背景图像的尺寸：
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
定义和用法
background-size 属性规定背景图像的尺寸。
| 默认值： | auto |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.backgroundSize="60px 80px" |
语法
background-size: length|percentage|cover|contain;
CSS white-space 属性
实例
规定段落中的文本不进行换行：
p
{
white-space: nowrap
}
定义和用法
white-space 属性设置如何处理元素内的空白。
这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。
| 默认值： | normal |
|---|---|
| 继承性： | yes |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.whiteSpace="pre" |
可能的值
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
CSS3 transition 属性
定义和用法
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
语法
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
- transition-property:
transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。
请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
默认值： all 继承性： no 版本： CSS3 JavaScript 语法： object.style.transitionProperty="width,height" 语法
transition-property: none|all|property;值 描述 none 没有属性会获得过渡效果。 all 所有属性都将获得过渡效果。 property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。 - transition-duration
transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。
默认值： 0 继承性： no 版本： CSS3 JavaScript 语法： object.style.transitionDuration="5s" 语法
transition-duration: time;值 描述 time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。
默认值是 0，意味着不会有效果。
- transition-timing-function
transition-timing-function 属性规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。
默认值： ease 继承性： no 版本： CSS3 JavaScript 语法： object.style.transitionTimingFunction="linear" 语法
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n);值 描述 linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 - transition-delay
transition-delay 属性规定过渡效果何时开始。transition-delay 值以秒或毫秒计。
默认值： 0 继承性： no 版本： CSS3 JavaScript 语法： object.style.transitionDelay="2s" 语法
transition-delay: time;值 描述 time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。
CSS3 text-shadow 属性
定义和用法
text-shadow 属性向文本设置阴影。
默认值： none 继承性： yes 版本： CSS3 JavaScript 语法： object.style.textShadow="2px 2px #ff0000" 语法
text-shadow: h-shadow v-shadow blur color;注释：text-shadow 属性向文本添加一个或多个阴影。
该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。值 描述 h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊的距离。 color 可选。阴影的颜色。参阅 CSS 颜色值。 CSS3 border-image 属性
定义和用法
border-image 属性是一个简写属性，用于设置以下属性：
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
如果省略值，会设置其默认值。
提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！
默认值： none 100% 1 0 stretch 继承性： no 版本： CSS3 JavaScript 语法： object.style.borderImage="url(border.png) 30 30 round" 可能的值
值 描述 border-image-source 用在边框的图片的路径。 border-image-slice 图片边框向内偏移。 border-image-width 图片边框的宽度。 border-image-outset 边框图像区域超出边框的量。 border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
CSS3 box-shadow 属性定义和用法
box-shadow 属性向框添加一个或多个阴影。
提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！
默认值： none 继承性： no 版本： CSS3 JavaScript 语法： object.style.boxShadow="10px 10px 5px #888888" 语法
box-shadow: h-shadow v-shadow blur spread color inset;注释：box-shadow 向框添加一个或多个阴影。
该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。值 描述 h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。请参阅 CSS 颜色值。 inset 可选。将外部阴影 (outset) 改为内部阴影。 语法
transform: none|transform-functions;
- transition-timing-function
- transition-duration
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
