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：

UA可以选择自己的算法来计算实际使用的颜色。

不同的浏览器会做出截然不同的事情：

Firefox将高光边框与全白（约57％）和低光边框与全黑（约68％）混合。
Opera将边框与白色和黑色强烈混合（每个25％）。
WebKit（Safari，Chrome）将低光边框与黑色（33％）混合，同时将高光边框保留为未触及的颜色。
当您使用inset / outset时，IE将边框的宽度拆分为两个。边框的内半部分具有75％黑色的低光阴影和未触动的高光颜色。边框的外半部分有一个高亮的颜色，25％为黑色，低光为50％，黑色。如果边框宽度为2px，则可以再现Windows 9x / NT4 / 2000按钮的边框样式。

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

浏览器如何确定用于边框的确切颜色：插入或开始？

1 个答案: