CSS3 新增属性（边框，背景，web前端自学

-webkit-background-clip:border-box;

-moz-background-clip:border-box;

background-clip:border-box;

（2）background-origin

background-origin 用来指定背景图像的原点位置，默认情况下总是以元素边框以内的左上角为坐标原点进行背景图像定位。

语法：

background-origin:border-box|padding-box|content-box;

• border-box：表示原点位置为边框区域的开始位置

• padding-box：表示原点位置为内边框区域的开始位置

• content-box：表示原点位置为内容区域的开始位置

例：

-webkit-background-origin:border-box;

-moz-background-origin:border-box;

background-origin:border-box;

（3）background-size

background-size 用来指定背景图像的大小。

语法：

background-size:[||auto]{1,2}|cover|contai;

• <length>：设置背景图像的宽度

• <percentage>：设置背景图像的高度

(宽度与高度如果只给出一个值，第二个值设置为auto)

• cover：表示保持背景图像本身的宽高比例将图像缩放到正好完全覆盖所定义的背景区域，可能会裁剪掉部分图像

• contai：表示保持背景图像本身的宽高比例，将图像缩放到正好适应所定义的背景区域，但可能不会完全覆盖背景区域

例：

background-size:30% 30%,60% 60%, 100% 100%;

3. 文字属性

| 属性 | 描述 |

| — | — |

| text-shadow | 可向文本应用阴影 |

| text-overflow | 溢出文本处理属性 |

| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行 |

| @font-face规则 | 字体自定义功能 |

（1）text-shadow

text-shadow 可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色

语法：

text-shadow:length|length|opacity|color；

• length：表示阴影在水平和垂直方向相对于文字本身的偏移距离（可以为负值）

• opacity：表示阴影效果模糊的距离（不能为负，0表示没有模糊）

• color：表示阴影的颜色值

例：

text-shadow:5px 5px 3px #333;

（2）text-overflow

text-overflow 溢出文本处理属性

语法：

text-overflow:clip|ellipsis|ellipsis-word；

• clip：表示直接裁切溢出的文本

• ellipsis：表示文本溢出时显示省略标记，代替最后一个字符

• ellipsis-word：也表示文本溢出时显示省略标记，代替的是最后一个词

例：

overflow:hidden; /溢出内容设为隐藏/

white-space:nowrap; /强制文本单行显示/

text-overflow:ellipsis; /设置溢出文本显示为省略标记/

（3）word-wrap

语法：

word-wrap: normal|break-word|；

• normal：表示为默认的连续文本换行，允许内容超出边界

• break-word：允许在单词内换行

例：

p.test {word-wrap:break-word;}

（4）@font-face规则

CSS3 新增了字体自定义功能，通过 @font-face 规则来引用互联网上任一服务器中存在的字体。

语法：

@font-face:{属性:值;}

属性和值为：

• font-family：设置文本的字体名称，该名称可被当作字体引用

• font-style：设置文本样式

• font-variant：设置文本是否为小型大写字母大小写

• font-weight：设置文本的粗细

• font-stretch：设置文本是否横向的拉伸变形

• font-size：设置文本字号大小

• src：设置自定义字体的相对路径或者绝对路径，可包含 format 信息

例：指定名为 “myFirstFont” 的字体，并指定在哪里可以找到它的 url：

@font-face {

font-family: myFirstFont;

src: url(‘Sansation_Light.ttf’),

url(‘Sansation_Light.eot’); /* IE9 */

}

4. 颜色属性

（1）HSL 模式

取值：

• H： Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

• S： Saturation(饱和度)。取值为：0.0% - 100.0%

• L： Lightness(亮度)。取值为：0.0% - 100.0%

例：hsl(360,50%,50%) 红色

（2）HSLA 模式

取值：

• H： Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

• S： Saturation(饱和度)。取值为：0.0% - 100.0%

• L： Lightness(亮度)。取值为：0.0% - 100.0%

• A： Alpha透明度。取值0~1之间。

例：hsl(360,50%,50%,0.5) 红色