背景和边框的相关样式

最新推荐文章于 2025-05-16 13:13:37 发布

原创最新推荐文章于 2025-05-16 13:13:37 发布 · 191 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

前端专栏收录该内容

23 篇文章

订阅专栏

本文介绍了CSS中背景和边框样式的高级用法，包括背景裁剪、起源点、大小控制、背景图像循环方式等属性，以及如何显示多个背景图片和设置圆角边框、图像边框的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景和边框的相关样式

1.新增的背景属性

属性	功能
background-clip	指定背景的显示范围
background-origin	指定绘制背景图像时的起点
background-size	指定背景中图像的尺寸
background-break	指定内联元素的背景图像进行平铺时的循环方式

background-clip
用法：
background-clip:border-box/padding-box/content-box;
border-box为默认值，背景从border区域向外裁剪，超出border部分将被裁剪掉
padding-box背景从padding区域向外裁剪，超出border部分将被裁剪掉
content-box背景从content区域向外裁剪，超出border部分将被裁剪掉

 div{
        width: 300px;
        height: 150px;
        border: dashed 30px green;
        padding: 30px;
        background-color: aqua;
        margin: 20px auto;
        background-clip: border-box;
    }

在这里插入图片描述
background-clip: padding-box;

background-clip: content-box;
在这里插入图片描述

background-origin
用法：
background-origin:border-box/padding-box/content-box;

background-break
background-break:continuous;忽略区域之间的间隔空隙
background-break:bounding-box;重新考虑区域之间的间隔
background-break:each-box对每一个独立的标签区域进行背景的重新划分

2.显示多个背景图片
background-image:url(),url(),url();
从上往下

3.圆角边框
border-radius属性
border-radius:10px 20px;
第一个半径是左上与右下
第二个半径是左下与右上
border-top-left-radius:10px;左上

4.图像边框
border-image:url() 边距;
指定四条边背景的显示方法
border-image:url() 上边距右边距下边距左边距/border宽度 topbottom leftright;
在显示的方法中可以指定的值有repeat,stretch和round
round将图像平铺显示，若最后一张不能完全显示，则不显示图像，把之前的图像扩大。
如，border-image:url() 10px 20px 30px 40px/10px repeat round;