一、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开始绘制 */