CSS----我不会的属性
规定背景图像的尺寸:
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