CSS3边框
border-radius box-shadow border-image
CSS3背景
background-size background-origin background-clip
1、圆角边框
border-radius
JavaScript 语法： object.style.borderRadius="5px"
向 div 元素添加圆角：
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}
box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
JavaScript 语法： object.style.boxShadow="10px 10px 5px #888888"
向 div 元素添加方框阴影：
div
{
box-shadow: 10px 10px 5px #888888;
}
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
border-image
JavaScript 语法： object.style.borderImage="url(border.png) 30 30 round"
使用图片创建围绕 div 元素的边框：
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
| 值 | 描述 |
|---|---|
| border-image-source | 用在边框的图片的路径。 |
| border-image-slice | 图片边框向内偏移。 |
| border-image-width | 图片边框的宽度。 |
| border-image-outset | 边框图像区域超出边框的量。 |
| border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |
CSS3背景
background-size 属性
background-size: length|percentage|cover|contain;
在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
| 值 | 描述 |
|---|---|
| length | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
| percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
background-origin 属性
background-origin: padding-box|border-box|content-box;
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
| 值 | 描述 |
|---|---|
| padding-box | 背景图像相对于内边距框来定位。 |
| border-box | 背景图像相对于边框盒来定位。 |
| content-box | 背景图像相对于内容框来定位。 |
background-clip 属性
background-clip: border-box|padding-box|content-box;
规定背景的绘制区域。
多重背景图片
为 body 元素设置两幅背景图片：
body
{
background- image:url(bg_flower.gif),url(bg_flower_2.gif);
}
