今天看到介绍说css3被拆分为模块，最重要的模块有如下：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。接下来就从这几个模块进行一些梳理。
这篇先整理css3背景和边框。css3中背景和边框的属性主要有如下：
css3背景和边框属性.png
background-image指定背景图片；background-size指定背景图片的大小；background-origin和background-clip分别有三个属性值，后者指定背景图的填充的位置是只填充content区域还是填充到border或是padding位置，前者定位图片显示的位置是在哪个区域。
背景区域示意图如下：
背景区域划分示意
举个栗子：若background-clip：border-box,则背景图从border-box的位置开始显示，想象背景图比较小，而border-box区域比较大，则背景图只是显示在上个区域划分示意图中左上角的位置。
下面上个热腾腾地例子帮助理解,注意看 background-clip的值：
/*css*/
.pstyle{
background-image: url("b_image.jpg");
background-size: 1200px 500px;
padding: 10px;
border: dotted 5px;
background-clip: content-box;
font-size: 25px;
}
/*html*/
<p class="pstyle">于千万人之中遇见你所要遇见的人，于千万年之中，时间的无涯的荒野里，
没有早一步，也没有晚一步，刚巧赶上了，那也没有别的话可说，惟有轻
轻 地问一声：“噢，你也在这里吗？”
</p>
效果图：
content-box
当background-clip: border-box;时：
border-box
当background-clip: padding-box;时：
padding-box
（上面属于一起来找茬的内容，看到变化了吗？哈哈哈）注意看背景图边缘的变化。
对于边框属性不再赘述，border-radius设置边框的弧度，如在上面的css样式中添加border-radius：15%；效果如下：
border-radius：15%
border-shadow设置边框阴影区域的大小，border-image设置边框图案。
学习过程中的一些笔记总结若有不当之处，感谢指出。愿自己在学习路上越走越远。
网友评论