CSS基础样式2——背景和边框

• background-origin和background-clip： 都指定背景的显示区域。背景是图片时调整background-origin，背景是颜色时，调整background-clip。在属性为border-box时，如果为实线边框，边框将覆盖住背景的图片或者颜色，和padding-box的效果一样。
• background-size：如果为cover，则图片按比例缩放直到覆盖要求的区域（可以喝background-origin配合使用），结果可能会裁切部分图片；如果为contain，则图片按比例缩放会完全显示出来。这个属性还可以和background-position一起使用。
• border-radius：如果属性有四个值，则依次是左上角，右上角，右下角，左下角；如果有三个值，则依次是左上角，右上和左下角，右下角；如果有两个值，则依次是左上和右下角，右上和左下角。可以用一个/隔开两个值表示一个角的水平半径/垂直半径，半径值越小，越接近直角。
• border-image:派生的属性：border-image-source/repeat/width/outset。
• border-image：用<number>和<percentage>值实现切片，number为图片上上右下左偏移的长度，中间的部分以背景形式显示。如果上下两个方位的内偏移值之和大于或等于图像高度，左右之和也大于或等于宽度，则只有四个角有切片。如果上下的内偏移值都大于等于图像高度，左右也大于等于宽度，则四个角可以获得完整的切片。‘ / ’之后表示边框高度和宽度设置图片作为边框时先设置border属性，再使用border-image属性。