- 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属性。
CSS基础样式2——背景和边框
最新推荐文章于 2024-08-24 10:33:39 发布