CSS3 入门2

CSS3 入门 2

五. CSS3背景

CSS3中包含几个新的背景属性，提供更大背景元素控制。

在本章您将了解以下背景属性:

属性	描述	CSS
background-clip	规定背景的绘制区域。	3
background-origin	规定背景图片的定位区域。	3
background-size	规定背景图片的尺寸。	3

浏览器支持

Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera  支持 新的背景属性

background-size 属性:

ackground-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。

CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。

你指定的大小是相对于?父元素的宽度和高度的百分比的大小。

background-origin 属性:

background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

多重背景图片

CSS3 允许您为元素使用多个背景图像（图片按层次铺设）。

实例：

为 body 元素设置两幅背景图片：

  
  
body
{ 
    background-image:url（bg_flower.gif），url（bg_flower_2.gif）;
}

background-clip 属性

标签定义及使用说明

ｊａｖａｓｃｒｉｐｔ 语法:

  
  
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;
}

六. CSS3 文本效果

1. text-shadow

text-shadow属性使用方法如下所示。

  
  
text-shadow:length  length  length  color

其中，前面三个length分别指阴影离开文字的横方向距离、阴影离开文字的纵方向距离和阴影的模糊半径，color指阴影的颜色。

指定多个阴影

可以使用text-shadow属性来给文字指定多个阴影，并且针对每个阴影使用不同颜色。

指定多个阴影时使用逗号将多个阴影进行分隔。到目前为止，只有Firefox浏览器、Chrome浏览器及Opera浏览器对这个功能提供支持。

1. .wrap {
2.    text-shadow:10px 10px #f39800，
3. 40px 35px #fff100，
4. 70px 60px #c0ff00;
5. color:navy;
6. font-size:50px;
7. font-weight:bold;
8. }

2. word-wrap

在 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-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 condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义如何拉伸字体。默认是 "normal"。
font-style	ormal 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"。