CSS3（1）边框和背景

今天看到介绍说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*/
        
于千万人之中遇见你所要遇见的人，于千万年之中，时间的无涯的荒野里， 
            没有早一步，也没有晚一步，刚巧赶上了，那也没有别的话可说，惟有轻
            轻 地问一声：“噢，你也在这里吗？”
        

效果图：

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设置边框图案。

学习过程中的一些笔记总结若有不当之处，感谢指出。愿自己在学习路上越走越远。