Web前端19：CSS3新增属性----背景和边框

一些最重要CSS3模块如下：

• 选择器
• 盒模型
• 背景和边框
• 文字特效
• 2D/3D转换
• 动画
• 多列布局
• 用户界面

CSS3 边框

CSS3边框属性有： border-radius、box-shadow
border-image

CSS3圆角------border-radius
一个用于设置所有四个边框的半径属性的速记属性
语法：border-radius: 1-4 length|% / 1-4 length|%;

border-radius属性若只指定一个值，就会产生四个圆角
若要分开写则其他属性为：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

若需要在四个角上一一指定：

• 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
• 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
• 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
• 一个值： 四个圆角值相同

初始样式：
添加圆角属性之后的样式：

CSS3 盒阴影------box-shadow
附加一个或多个下拉框的阴影
语法：box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值

初始样式：
添加盒阴影属性之后的样式：

CSS3 边界图片------border-image
设置所有边框图像的速记属性。
语法：border-image: source slice width outset repeat|initial|inherit;

因为博主本主没有合适的边框图片，就采用了某菜的例子嘻嘻

效果图如下：

CSS3背景

CSS3新的背景属性：

• background-image
• background-size
• background-origin
• background-clip

CSS3 background-image属性

可以通过background-image属性添加背景图片。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

#image{
	background-image: url(img1.gif),url(img2.gif); 
	}
/*可以给不同的图片设置多个不同的属性*/

#image{
    background: url(img1.gif) right bottom no-repeat, url(img2.gif) left top repeat;
}

CSS3 background-size 属性
background-size指定背景图像的大小，指定的大小是相对于父元素的宽度和高度的百分比的大小。

div
{
    background:url(img1.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}
/*伸展背景图像完全填充内容区域：*/
div
{
    background:url(img1.gif);
    background-size:100% 100%;
    background-repeat:no-repeat;
}

CSS3 的 background-origin 属性
background-origin 属性指定了背景图像的位置区域。

content-box, padding-box,和 border-box区域内可以放置背景图像。

/*在 content-box 中定位背景图片：*/
div
{
    background:url(img1.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;
}

CSS3 background-clip属性
background-clip背景剪裁属性是从指定位置开始绘制

#image { 
    border: 10px dotted black; 
    padding: 35px; 
    background: yellow; 
    background-clip: content-box; 
    /*background-clip: padding-box;*/
}