css - 浏览器如何确定用于边框 : inset or outset? 的确切颜色

Question

如果我指定 border: 1px outset blue; 作为元素的样式，浏览器会呈现两种不同的边框颜色:一种用于上边框和左边框，另一种用于下边框和右边框.

li
  { border: 10px outset #0000FF;
    color: #FFF;
    background-color: #0000FF;
    width: 30%;
    }

p
  { margin: 1em 2em;
    text-align: center;
    }

<li><p>Hi!</p></li>

给定一个为边框指定的颜色，浏览器如何确定渲染边框的颜色？或者，给定一个显示起始边框的图形组件(例如 .PSD)有两种不同的颜色，如何选择单一的边框颜色来指定以获得最接近 comp 的结果？

Answer 1

没有一种算法specified by CSS :

UAs may choose their own algorithm to calculate the actual colors used.

不同的浏览器做的事情截然不同:

• Firefox 将高光边框与全白(约 57%)和低光边框与全黑(约 68%)混合。

• Opera 将边框与白色和黑色混合的强度较低(各 25%)。

• WebKit(Safari、Chrome)将低光边框混合为黑色 (33%)，同时将高光边框保留为未更改的规定颜色。

• 当您使用 inset/outset 时，IE 会将边框的宽度一分为二。边框的内侧一半具有 75% 黑色的低光阴影和未触及的高光颜色。边框的外半部分具有 25% 至黑色的高光色和 50% 至黑色的低光色。如果 border-width 为 2px，这具有再现 Windows 9x/NT4/2000 按钮的边框样式的效果。

不幸的是，您无法从插入/开始/凹槽/脊边界中获得一致的结果。通常结果会有所不同，但跨浏览器仍然可以；如果这还不够好，您需要明确指定每个边框的颜色。