1、背景属性

背景颜色绘制区域——background-clip属性

• background-clip: border-box; 背景被裁剪到边框区域，在内容区、内填充区、边框区域显示，默认值

• background-clip: padding-box; 背景被裁剪到内填充区域，在内容区、内填充区显示

• background-clip: content-box; 背景被裁剪到内容区域，仅在内容区域显示

     .wrap div {
            width: 200px;
            height: 200px;
            background: plum;
            padding: 30px;
            margin: 30px;
            border: 20px dotted black;
        }
​
        /* 背景被裁剪到内容区域，仅在内容区域显示 */
        .wrap div:nth-child(1) {
            /* content-box */
            background-clip: content-box;
        }
​
        /* 背景被裁剪到内填充区域，在内容区、内填充区显示 */
        .wrap div:nth-child(2) {
            /* padding-box */
            background-clip: padding-box;
        }
​
        /* 背景被裁剪到边框区域，在内容区、内填充区、边框区域显示，默认值 */
        .wrap div:nth-child(3) {
            /* border-box */
            background-clip: border-box;
        }