Stunning CSS3 读书笔记: 第三章 纸质笔记

　　注意：本文中的实例效果均非效果图片，推荐使用新版的非IE浏览器，或IE9+浏览器浏览本文，否则可能无法查看到最佳效果。

 

　　本章中，我们主要围绕实现纸质笔记的样式展开，逐步阐述了以下的CSS特性：

　　

• 　　background-size属性
• 　　在一个元素上使用多重背景图片
• 　　border-image属性
• 　　background-clip属性
• 　　@font-face规则

 

　　1.背景图缩放

　　在CSS3之前，背景图是无法缩放的，但随着CSS3的到来，这一切都成为了历史。

　　背景图的缩放需要引入CSS3的background-size属性，我们可以控制背景图片在水平和垂直两个方向的缩放，也可以控制图片拉伸覆盖背景区域的方式。

　　先看个简单的例子，以下是一张图片，大小为150px * 150px。

　　

 

　　我们把它作为一个div的背景，并设置重复，代码如下：

　　

div{
width: 400px;
height: 400px;
background-image: url(http://images.cnblogs.com/cnblogs_com/techlulu/390775/o_star.PNG);
}

 

　　

　　效果如下：

　　

 

 

　　可以看到背景图片重复出现，但由于div的尺寸和图片的尺寸不是正好倍数，所以在右侧和底部，图片的一些区域会被剪裁而不能显示。

　　我们可以使用background-size属性缩放图片，将宽度变为100px(正好被400整除)，代码如下所示：

　　

div{
width: 400px;
height: 400px;
background-image: url(http://images.cnblogs.com/cnblogs_com/techlulu/390775/o_star.PNG);
-moz-background-size:100px auto;
-webkit-background-size:100px auto;
background-size:100px auto;
}

 

我们得到的效果如下：

 

 

　　可以看到，图片大小已经缩小，且可以显示完整了。

 

　　未完待续...