CSS自学笔记(11):CSS3背景和边框

CSS3 背景

在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化。

CSS3中主要是通过定义backgrounp中的各个属性来控制背景(高宽,位置,透明度…………)。

关于背景的部分常用属性有(*为CSS3中新增属性):

描述
background-color 规定要使用的背景颜色。
background-position 规定背景图像的位置。
background-size* 规定背景图片的尺寸。
background-repeat 规定如何重复背景图像。
background-origin* 规定背景图片的定位区域。
background-clip* 规定背景的绘制区域。
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-image 规定要使用的背景图像。
inherit 规定应该从父元素继承 background 属性的设置。
……………………… ………………………………

现在主流浏览器都支持最新的CSS3关于背景的属性,所以不用担心浏览器的问题了。。。。。。。

在CSS3之前,如果需要一张图片来作为背景时,背景的尺寸有图片的实际尺寸决定。

在CSS3中可以定义背景图片的尺寸了,这样我们就可以在不同的元素中使用同一张图片作为背景图片。定义背景图片的尺寸时可以用像素或者百分比数来定义。

* {
background:url(1.png);
background-size:200px 100px;
background-repeat:no-repeat;
}

原始图片为下左图,使用上面的CSS样式表定义后,就变成了下右图

CSS自学笔记(11):CSS3背景和边框    CSS自学笔记(11):CSS3背景和边框

所以,我们可以对一张图片进行拉伸处理,使其大小适应于所要填充的区域,无需通过其他软件对图片做修改,同时也可以使一张图片作为多个元素的背景图片。

* {
background:url(1.png);
background-size:120px 100%;
background-repeat:no-repeat;
}

CSS自学笔记(11):CSS3背景和边框

在一个盒子内部,我们也可以通过属性来定义背景图片的定位区域,定义图片是边框背景(content-box),内边距背景(padding-box)还是元素内容背景(border-box)。

CSS自学笔记(11):CSS3背景和边框

在CSS3中,我们可以用多张图片用来作为元素的背景图片。

*{
background-image:url(1.gif),url(1.png),……;
}

除了图片,我们也可以通过颜色来实现很多背景样式。

CSS自学笔记(11):CSS3背景和边框

CSS3 边框

对于边框的属性,在CSS3中也新增了不少,例如添加边框阴影,用图片来绘制边框(边框是有宽度的),定义圆角边框等等,也减少了用第三方软件设计来边框。

CSS3中新的边框的部分属性

属性 描述
border-image 设置所有 border-image-* 属性的简写属性。
border-radius 设置所有四个 border-*-radius 属性的简写属性。
box-shadow 向方框添加一个或多个阴影。

定义一个圆角边框

*{
border:5px solid;
border-radius:50px;
}

CSS自学笔记(11):CSS3背景和边框

我们也可以为边框添加阴影效果

* {
box-shadow: 10px 10px 5px #CF0;
}

CSS自学笔记(11):CSS3背景和边框

我们也可以用图片作为元素的边框

* {
border-image:url(border.png) 25 25 round;
border-image:url(border.png) 25 25 stretch;
}

CSS自学笔记(11):CSS3背景和边框

背景图片:

CSS自学笔记(11):CSS3背景和边框来源:http://www.w3school.com.cn/i/border.png

上一篇:CSS3背景温故


下一篇:Polycarp and Letters(set首战!)