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

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

CSS没有指定任何算法:

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

不同的浏览器做了不同的事情:

• Firefox将高亮边框与全白(约57%)和低光边框(全黑)(约68%)混合在一起.

• Opera将边框与白色和黑色的强烈混合(每个25%).

• WebKit(Safari,Chrome)将低光边框与黑色(33%)混合,同时将高光边框保留为未触及的声明颜色.

• 当您使用inset/outset时,IE将边框的宽度分成两部分.边框的内半部分具有75%黑色的低光阴影和未触动的高光颜色.边框的外半部分有一个高亮的颜色,25%为黑色,低光为50%,黑色.如果边框宽度为2px,则具有再现Windows 9x/NT4/2000按钮的边框样式的效果.

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