代码之家 › 专栏 › 技术社区 › KatieK

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

css

KatieK · 技术社区 · 15 年前

如果我指定 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>

给定为边框指定的单一颜色,浏览器如何确定要呈现边框的颜色? 或者,假设一个图形化的comp(例如.psd)显示一个具有两种不同颜色的开始边框,如何选择一个边框颜色来指定以获得与comp最接近的结果?

1 回复 | 直到 11 年前

bobince 15 年前

没有一种算法 specified by CSS :

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

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

火狐将高光边框与全白(约57%)和低光边框与全黑(约68%)混合在一起。
Opera将边界与白色和黑色混合得不那么强烈(各占25%)。
Webkit(Safari,Chrome)将低光边框与黑色(33%)混合,同时将高光边框保留为未经处理的指定颜色。
IE在使用“插入/开始”时将边框的宽度拆分为两部分。边框的内半部分具有75%黑色的低光阴影和未接触的高光颜色。边框的外半部分有25%到黑色的高光颜色和50%到黑色的低光颜色。如果边框宽度为2px,则会复制Windows 9x/NT4/2000按钮的边框样式。

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

推荐文章