如果我指定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边框得到一致的结果.通常结果是不同的,但仍然可以浏览器;如果这还不够好,您需要明确指定每个边框边颜色.