background-clip的用法:

最新推荐文章于 2024-08-25 21:20:54 发布

cusy

最新推荐文章于 2024-08-25 21:20:54 发布

阅读量2.9k

点赞数 2

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_47092383/article/details/106313577

版权

background-clip属性用于控制背景的渲染区域，其可选值包括border-box、padding-box和content-box，默认值为border-box。通过改变这个属性，可以裁剪背景显示的范围，例如在不同的设置下，背景图像和颜色的显示效果会有所差异。结合background-origin使用，可以更好地调整背景图的渲染起点。

摘要由CSDN通过智能技术生成

效果:控制背景的渲染区域
可选属性值: border-box | padding-box | content-box,默认值为border-box。
background-clip原理是将背景渲染的区域控制和裁剪背景大小,在裁剪范围外的区域则不会被显示。

这里举个例,定义一个相同效果的div,将其background-clip的属性取值不同,所在页面上表现的效果区别,代码如下:

css:

        div {
   
            display: inline-block;
            width: 200px;
            height: 200px;
            padding: 20px;
            margin-left