css3边框、背景

一、css3 边框

边框属性：
1)border-radius
2)box-shadow
3)border-image

1. 圆角框

border：2px solid #a1a1a1;
border-radius:25px;
border-radius等价于：
border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
如果border-radius有不同的值分别代表的不同
四个值：左上 右上 右下 左下
三个值：左上 右上和左下 右下
两个值：左上和右下 右上和左下
一个值：四个角都一样

2.盒阴影

div{
box-shadow:10px 10px 5px #888888;
}
给div增加阴影

3.边界图片

border-image使用图片作为边框

二、css3背景

1)background-image
2)background-size
3)background-origin
4)background-clip

1、background-image

不同背景图像用逗号隔开：
background-image：url(img-flw.gif),url(img-gao.gif);
background-position:right bottom,left top;
background-repeat:no-repeat ,repeat;
可以给不同的图片设置多个不同的属性：
background：url(img-flw.gif) right bottom no-repeat,
url(img-gao,gif) left top repeat;

2、background-size

background-size指定背景图像的大小，在不同环境中指定背景的大小，所指定的大小是相对于父元素的宽度和高度的百分比大小。
实例：重置背景图像
div{
background：url(img_flw.gif) ;
background-size:80px 80px;
background-repeat:no-repeat;
}
实例：延伸背景图片使完全填充区域
div{
background:url(img_flw.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}

3、background-Origin

指定背景图像的位置区域
实例：
div{
border：1px solid black;
padding:35px;
background-image:url(smiey.gif);
background-repeat:no-repeat;
background-position:left;
}
#div 1{
background-origin:border-box;
/*背景图像的相对位置是边界框 */
}
#div 2{
background-origin:center-box;
/*背景图像的相对位置的内容框 */
}

4、background-clip

背景裁剪是 从指定的位置开始绘制
实例：
border:10px dotted black;
padding:35px;
background:yellow;
background-clip:padding-box;
/* 背景从padding开始绘制 * /
background-clip：centent-box;
/* 背景从centent开始绘制 */