CSS3中包含几个新的背景属性,提供更大背景元素控制。
在本章您将了解以下背景属性:
属性 | 描述 | CSS |
---|---|---|
background-clip | 规定背景的绘制区域。 | 3 |
background-origin | 规定背景图片的定位区域。 | 3 |
background-size | 规定背景图片的尺寸。 | 3 |
ackground-size指定背景图像的大小。CSS3以前,背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片,让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于?父元素的宽度和高度的百分比的大小。
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
多重背景图片
CSS3 允许您为元素使用多个背景图像(图片按层次铺设)。
实例:
为 body 元素设置两幅背景图片:
- body
- {
- background-image:url(bg_flower.gif),url(bg_flower_2.gif);
- }
background-clip 属性
javascript 语法:
- object object.style.backgroundClip="content-box"
语法
- background-clip: border-box|padding-box|content-box;
值 | 说明 |
---|---|
border-box | 默认值。背景绘制在边框方框内(剪切成边框方框)。 |
padding-box | 背景绘制在衬距方框内(剪切成衬距方框)。 |
content-box | 背景绘制在内容方框内(剪切成内容方框)。 |
实例
规定背景的绘制区域:
- .wrap
- {
- background-color:yellow;
- background-clip:content-box;
- }
text-shadow属性使用方法如下所示。
- text-shadow:length length length color
其中,前面三个length分别指阴影离开文字的横方向距离、阴影离开文字的纵方向距离和阴影的模糊半径,color指阴影的颜色。
指定多个阴影
可以使用text-shadow属性来给文字指定多个阴影,并且针对每个阴影使用不同颜色。
指定多个阴影时使用逗号将多个阴影进行分隔。到目前为止,只有Firefox浏览器、Chrome浏览器及Opera浏览器对这个功能提供支持。
- .wrap {
- text-shadow:10px 10px #f39800,
- 40px 35px #fff100,
- 70px 60px #c0ff00;
- color:navy;
- font-size:50px;
- font-weight:bold;
- }
在 CSS3 中,word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分:
CSS实例代码:
允许对长单词进行拆分,并换行到下一行:
- p {word-wrap:break-word;}
拆分前:
拆分后:
Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。
所有主流浏览器都支持 word-wrap 属性。
七. CSS3 字体
@font-face 规则
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。
注释:Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。
如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont):
实例
- <style>
- @font-face
- {
- font-family: myFirstFont;
- src: url('singlemalta-webfont.ttf'),
- url('singlemalta-webfont.eot'); /* IE9+ */
- }
示例:
- @font-face
- {
- font-family: myFirstFont;
- src: url('singlemalta-webfont.ttf'),
- url('singlemalta-webfont.eot'); /* IE9+ */
- font-weight:bold;
- }
文件 "singlemalta-webfont.ttf" 是另一个字体文件,它包含了 singlemalta字体的粗体字符。
只要 font-family 为 "myFirstFont" 的文本需要显示为粗体,浏览器就会使用该字体。
通过这种方式,我们可以为相同的字体设置许多 @font-face 规则。
下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符:
描述符 | 值 | 描述 |
---|---|---|
font-family | name | 必需。规定字体的名称。 |
src | URL | 必需。定义字体文件的 URL。 |
font-stretch |
| 可选。定义如何拉伸字体。默认是 "normal"。 |
font-style |
| 可选。定义字体的样式。默认是 "normal"。 |
font-weight |
| 可选。定义字体的粗细。默认是 "normal"。 |
unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |