- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
背景:
Here是 W3C 规范定义 border-image-width
的方式。
Here MDN 如何解释 border-image-width
。
Here是 W3C 规范定义 border-image-outset
的方式。
Here MDN 如何解释 border-image-outset
。
我们都知道 border-image-width 的工作原理。它接受边界框并据此计算它的值。但是,当我们将它与 border-image-outset 一起使用时,它如何计算它的值,因为 border-image-outset 属性会更改边框图像区域以扩展到元素框区域之外。请看下图:(图片来自here)
声明:
以下示例向我们展示了 border-image-width 仍然根据边框外边缘的高度和宽度进行计算。(这没有意义,但无论如何)
使用的边框图像:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Border-image-width</title>
<style>
p.ShowingBorderImageOutsetExample1{
border: 3px solid black;
width:500px;
border-image-source: url("/image/BlCZO.png");
border-image-slice: 20%;
border-image-width: 1;
border-image-outset: 6px;
outline: 1px solid black;
}
p.ShowingBorderImageOutsetExample2{
border: 1px solid black;
width:500px;
border-image-source: url("/image/BlCZO.png");
border-image-slice: 20%;
border-image-width: 1;
border-image-outset: 6px;
outline: 1px solid black;
}
</style>
</head>
<body>
<p class="ShowingBorderImageOutsetExample1">Hi this is just a demo</p>
<p class="ShowingBorderImageOutsetExample2">Hi this is just a demo</p>
</body>
</html>
如您所见,我们将 border-image-outset 和 border-image-width 保持不变。唯一发生变化的是 border-width,因为它发生了变化。这暗示 border-image-width 是根据 boder-width 计算的。
问题:
现在,虽然关于为什么 border-image-width 仍然在 border box 上计算似乎有点奇怪,但我的问题是它如何在扩展的新维度上调整那些 Angular 图像 block 、那些顶部宽度图像 block 等?
请注意,border-image-slice 为我们提供了片段,这些片段在 border-image-width 给定的尺寸上被拉伸(stretch)(默认)。但是由于使用了 border-image-outset,尺寸发生了变化。没有 body 拥有这些尺寸。 border-image-width 仍然依附于 border box 给定的尺寸。
最佳答案
border-image-width
的计算实际上并不依赖于border-image-outset
。 Outset 只是指定一个偏移量,在该位置绘制边框图像并且对边框的宽度没有影响。
如规范中所述,当您为 border-image-width
属性使用纯数值(没有百分号或任何单位)时,计算出的宽度值是 边框宽度
。
<number> Numbers represent multiples of the corresponding computed border-width.
(描述中的重点是我的)
因此,对于您的情况,第一个示例的 border-image-width
为 1*3px (= 3px),第二个示例为 1*1px (= 1px)。这也是您从输出中看到的。边框图像第一个示例中的边框图像比第二个示例中的边框图像更厚。
border-image-outset
只是告诉 UA border-image
应该绘制在距元素原始边框 X 像素的偏移处. 偏移量在 元素的原始边框框之外,因为它是一个外边框。在您的情况下,它是元素的原始边框框的顶部、底部、左侧和右侧的偏移量 6px
。因此,对于第一个示例,我们看到一个 3px 宽的边框和一个 3px 宽的间隙(因为一开始总共是 6px),而对于第二个示例,我们看到 1px 宽的边框和一个 5px 宽的间隙(同样一开始是 6px总计)。
评论中的讨论总结:
正如您正确指出的那样,一旦添加了 outset,外部矩形(由 outset 创建的矩形)的尺寸将大于内部矩形的尺寸(原始的 border-box
元素),但这不会导致 border-image-width
尺寸的任何增加。 border-image-width
只是定义了 border-image 的thickness(实际上这种措辞差异有时也会引起误解) 并且无论边框是围绕内部矩形(原始 border-box
)还是外部矩形(偏移框)绘制的,厚度都保持不变。
实际发生的是用于边框的图像 (border-image-source
) 根据 border-image-slice
被分割成几 block 属性,然后根据 border-image-width
将各个部分首先放置在 4 个 Angular 上。然后,位于中心的剩余部分将根据 border-image-repeat
设置(round/space/repeat)进行填充。没有。中间的 block 数将比正常情况多,因为偏移的外部矩形在顶部和底部更宽,而在右侧和左侧更高。
这可以通过查看 first example that is available under the border-image
section in the specs 来理解。 :
关于html - 使用 border-image-outset 计算 border-image-width,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42305824/
CSS outset、inset、border 和 outline 之间的确切区别是什么。 真的很困惑,什么属性可以一起应用? 哪些浏览器支持上述哪些属性? 以上属性的简短示例会很好。 谢谢 最佳答案
如果我指定 border: 1px outset blue; 作为元素的样式,浏览器会呈现两种不同的边框颜色:一种用于上边框和左边框,另一种用于下边框和右边框. li { border: 10px
我正要在 chromium 问题跟踪器上创建一个错误,但后来我想我应该先在这里尝试一下。 试着看看这个网站: http://www.norabrowndesign.com/css-experiment
这会导致在悬停时以“向下滑动 Action ”的方式在文本下方显示一条线。但是,我希望它出现在“向上滑动 Action ”中。对此有什么巧妙的解决方案吗? CSS: .nav a { color:#f
背景: Here是 W3C 规范定义 border-image-width 的方式。 Here MDN 如何解释 border-image-width。 Here是 W3C 规范定义 border-i
box-shadow 属性有一个名为inset 的属性值,因此阴影可以是inset 或outset。 但是如何在 CSS 中为 div 设置 inset 和 outset 阴影? 最佳答案 您需要使用
在网络上搜索,似乎我的问题的解决方案是 CSS3 属性 border-image-outset。由于还没有浏览器实现这一点,我希望有人能帮我解决其他问题。提前致谢。 This is the layou
我是一名优秀的程序员,十分优秀!