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

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

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

<style>
div
{
border:2px solid black;
background:#dddddd;
width:200px;
height:100px;
border-radius:25px;
}
</style>

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

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

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

<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>

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

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

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

<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}

#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(border.png) 30 stretch;
}
</style>

效果图如下：

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;*/
}