CSS3边框 , 背景

CSS3

CSS3边框

border-radius box-shadow border-image 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
4000
|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);
}