css - 什么是最被接受的CSS边框插入算法？

Question

我注意到每个浏览器都以不同的方式呈现 border-style: inset; 属性，所以我有两个问题:

1. 为什么浏览器会以不同方式呈现它？怎么会有这么多不同的算法呢？最重要的是，某些浏览器看起来有问题!

2. 由于我不能依赖 inset 属性工作，所以我想知道正确的“算法”是什么？我通常在顶部/左侧调亮 16 个，在底部/右侧调暗 16 个(即 #666666 是背景，所以 #767676 是顶部/左侧和 #565656 是底部/右边)

我需要知道要使用什么(一般来说)，因为我在制作样式插图时遇到了问题，而且我显然无法正确使用插图，所以我必须手动更改颜色。然而，有时它看起来并不正确(如果它太暗)。必须有一个好的算法吗？

我已经搜索了有关该问题的网络资源(例如“您的边框需要什么颜色才能使它看起来像嵌入!”工具)或任何可以提供帮助的资源，但一无所获。

这样想:如果有人在绘画程序中制作东西并且没有插入效果按钮，那么他们的四个边框应该是什么颜色，假设主要颜色是_____？

必须有一个我找不到的通用算法...

编辑:我想回到我使用需要插入样式的绘图程序的示例。有人可以给我一个他们会用什么的例子吗？ (问题的这一部分是否更好地针对设计师堆栈？)

Answer 1

引用: “1. 为什么浏览器会以不同方式呈现它？”

我敢肯定每个浏览器的做法都不一样，因为他们认为自己的看起来最好。 IE 可能这样做是为了在 Windows 中看起来不错。 Safari 正在使它们与 Mac OS 的外观保持一致。 Firefox 与该浏览器的其他元素等保持一致(如 thirddot 所述，它尚未标准化。)

引用: “2. 由于我不能依赖 inset 属性工作，所以我想知道正确的‘算法’是什么？”

如果它那么重要，您可以尝试对其进行逆向工程。设置一个测试页面并在浏览器中调用它。使用滴管/颜色选择器实用程序来挑选各种颜色。有了足够的样本，您应该能够为该浏览器找到一种模式。

引用: “必须有一个我找不到的通用算法......”

如果每个浏览器的处理方式不同，则不会。每个都有自己的算法。

---

编辑以解决 OP 的后续问题:

引用: “编辑:我想回顾一下我使用需要嵌入样式的绘图程序的示例。有人可以给我一个例子吗？” d 用于此？(这部分问题是否更好地针对设计人员堆栈？)”

您似乎在寻找一个不存在的特定答案。我无法举例说明我会使用什么，因为现代图形程序 (Photoshop) 会为我做这件事，然后给我足够多的选项，这些选项在组合时可以提供数百万个结果；边框颜色、高亮颜色、阴影颜色、深度、 Angular 、厚度、轮廓等。问 20 个人他们认为什么是“完美”的插图，你会得到 20 个不同的答案(真的是意见)然后我们回到它在每个浏览器中看起来不同的原因(参见上面的#1)。所以，是的，在“编程”问题的背景下，您 OP 的最后一部分可能是题外话。

额外的随机想法:

为什么 border-style 不是标准化的？恕我直言，我认为这个属性根本没有被充分使用，不足以保证为标准化做出任何重大努力，或者在标准社区中可能对此存在很多分歧。我想所有需要标准化的 CSS 属性都以某种方式(受欢迎程度、实用性？)进行了优先排序，而这个只是还没有成功或将所有人聚集在一起。就我个人而言，我认为像这样的特性与不断变化的趋势联系得太紧密了。即 - 10 年前，我们经常看到许多带有非常厚的“浮雕”边框的 table 。如今，许多设计使用很少的边框或非常细的边框(如果有的话)。同样，这只是品味和意见的问题。