Css 背景剪辑：边框框的行为类似于它的值填充框_Css

Css 背景剪辑：边框框的行为类似于它的值填充框

css

Css 背景剪辑：边框框的行为类似于它的值填充框,css,Css,我正在玩背景剪辑属性，以查看其三个值的效果就在几分钟前，值边框框停止显示图像。也就是说，它在外部边框的边缘开始图像，但现在它在边框内部开始图像，但在填充框的末尾开始请查看代码和密码在我的浏览器中，它们都显示为：如您所见，对于背景剪辑属性，具有值边框框的第一个框不会在外边框的边缘显示图像。相反，它的行为与填充框完全相同以下也是为方便您而编写的代码 div{ 利润率：50像素；边框样式：实心；边框颜色：rgba（255,255,0,0.7）；边框宽度：50px；填充：20px；

我正在玩

背景剪辑

属性，以查看其三个值的效果

就在几分钟前，值

边框框

停止显示图像。也就是说，它在外部边框的边缘开始图像，但现在它在边框内部开始图像，但在填充框的末尾开始

请查看代码和密码

在我的浏览器中，它们都显示为：

如您所见，对于

背景剪辑

属性，具有值

边框框

的第一个框不会在外边框的边缘显示图像。相反，它的行为与填充框完全相同

以下也是为方便您而编写的代码

div{
利润率：50像素；
边框样式：实心；
边框颜色：rgba（255,255,0,0.7）；
边框宽度：50px；
填充：20px；
宽度：200px；
高度：300px；
浮动：左；
背景图像：url（“https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/roses-small.gif");
背景重复：无重复；
背景色：rgba（1202101800.65）；
颜色：白色；
字号：2em；
}
.违约{
背景剪辑：边框框；
}
.填充箱{
背景剪辑：填充框；
}
.contentBox{
背景剪辑：内容框；
}

背景剪辑：边框框
背景剪辑：填充框
背景剪辑：内容框

，如上所述：

背景剪辑CSS属性指定元素的背景（无论是颜色还是图像）是否延伸到其边框下方

这里的关键字是extends，示例中的背景没有扩展到任何地方，因为您设置了

background repeat:no repeat

。这里的混淆源于背景的来源，它由-property指定，默认为

填充框

如果将

背景原点

与

背景剪辑

一起设置，它将产生您要查找的结果

div{
利润率：50像素；
边框样式：实心；
边框颜色：rgba（255,255,0,0.7）；
边框宽度：50px；
填充：20px；
宽度：200px；
高度：300px；
浮动：左；
背景图像：url（“https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/roses-small.gif");
背景重复：无重复；
背景色：rgba（1202101800.65）；
颜色：白色；
字号：2em；
}
.违约{
背景剪辑：边框框；
背景来源：边框框；
}
.填充箱{
背景剪辑：填充框；
背景来源：填充框；
}
.contentBox{
背景剪辑：内容框；
背景来源：内容框；
}

背景剪辑：边框框
背景剪辑：填充框
背景剪辑：内容框

您的图像只有200px宽，但您将其应用于300px宽的元素，因此这里没有任何剪辑。添加例如

背景大小：110%，然后看看会发生什么…我将尝试一下，但我的困惑是：值边框框
，即默认值，是否应该使图像开始显示在距边框外边缘的坐标（0，0）处？否。指定的作业将转到背景原点
属性。默认设置为填充框
。有趣。我正在尝试一些事情。你可能是对的。我很快会回来的。你说得对，正如@CBroe在评论部分所说的那样。我试过了。我必须报复，心想——这一切都很令人困惑。名称background-origin
和background-clip
适合它们应该展示的行为，但混淆的是background-clip:content-box
也从内容框的左边缘开始图像。@WaterCoolerv2它实际上不是从那里开始的，仔细看；-）它在填充框
处启动图像，但不显示边缘，因为不允许扩展到填充框啊！真是松了一口气！非常感谢。：-）