如果我指定border：1px开始蓝色;作为元素的样式,浏览器会呈现两种不同的边框颜色：一种用于顶部和左侧边框,另一种用于底部和右侧边框.
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的结果？
解决方法
没有一个算法
specified by CSS：
UAs may choose their own algorithm to calculate the actual colors used.
不同的浏览器有很大的不同：
> Firefox将高亮边框与全白(约57％)和全黑色(约68％)的低光边框混合.
歌剧混合边框的白色和黑色不太强烈(每个25％).
> WebKit(Safari,Chrome)将低频边框与黑色(33％)混合,同时将突出显示边框作为未触动的指定颜色.
>当您使用插入/开始时,IE将边框的宽度分成两部分.边框的内部一半具有75％黑色的低光阴影和未触动的高亮颜色.边框的外半部分有一个高亮度的颜色,黑色为黑色,黑色为50％.如果border-width为2px,则可以重现Windows 9x / NT4 / 2000按钮的边框样式.
不幸的是,你不能从inset / outset / groove / ridge边框得到一致的结果.通常结果是不同的,但仍然可以浏览器;如果这还不够好,您需要明确指定每个边框边颜色.
