样式属性

来源：互联网发布：网络吃饼干是什么意思编辑：程序博客网时间：2024/04/30 23:07

字体

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

font-family：设置文本的字体名称。

font-style：设置文本样式。

font-variant：设置文本是否大小写。

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

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

font-size：设置文本字体大小。

src：设置自定义字体的相对路径或者绝对路径，注意，此属性只能在@font-face规则里使用。

背景

background-origin ： border | padding | content

border：从border区域开始显示背景。

padding：从padding区域开始显示背景。

content：从content区域开始显示背景。

background-clip ： border-box | padding-box | content-box | no-clip

border-box：从border区域向外裁剪背景。

padding-box：从padding区域向外裁剪背景。

content-box：从content区域向外裁剪背景。

no-clip：从border区域向外裁剪背景。

background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain

<length>：由浮点数字和单位标识符组成的长度值。不可为负值。

<percentage>：取值为0%到100%之间的值。不可为负值。

<background-image>：指定或检索对象的背景图像。

<background-origin>：指定背景的显示区域。参见background-origin

<background-clip>：指定背景的裁剪区域。参见background-clip

<background-repeat>：设置或检索对象的背景图像是否及如何重复铺排。

<background-size>：指定背景图片的大小。参见background-size

<background-position>：设置或检索对象的背景图像位置。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="utf-8" /><meta name="robots" content="all" /><meta name="author" content="Tencent-ISRD" /><meta name="Copyright" content="Tencent" /><title>Border-radius</title></head><body><div style="background-image: url(img/multiple-backgrounds.png), url(img/multiple-backgrounds.png), url(img/multiple-backgrounds.png); background-position: left top, -320px bottom, -640px top;background-repeat: no-repeat, no-repeat, repeat-y;width:260px;padding:20px;"> <p>这是一个宽为300px，高度自适应的多背景示范容器，完成的一个九宫格模型</p> </div></body></html>