首页 文章

边框颜色顺序

提问于
浏览 次
9

我有一个表格，每个边框设置为1px宽度固体 . 我希望顶部，左边和底部边框为黑色，右边框为白色 . 所以，我用这个css代码

border-right-color: white;    
border-left-color: black; 
border-top-color: black; 
border-bottom-color: black; 
border: solid 1px;

IE9中存在问题，右上角像素为白色，但右下角为黑色 .

我怀疑问题来自IE9重新组织样式的方式，因为当我在开发工具控制台中查看我的表的css时，它的排序方式如下：

border-top-color: black;
border-right-color: white; 
border-bottom-color: black;  
border-left-color: black; 
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;

这让我想到，也许，用于定义颜色的顺序使得顶部边框颜色为黑色，然后右边框颜色为白色（覆盖右上角），然后底部边框颜色为黑色（覆盖底部）右边角落）和左边框左边是彩色的 .

问题是，在白色背景上，顶部和底部边框看起来不是相同的长度（按一个像素） . 它可能不是很多，但我需要这两个边框以适应我页面上的其他行 .

那么，我怎么能解决这个问题呢？这真的是关于边框颜色的顺序，如果是，我怎么能改变它？

html css

3 回答

  • 4

    您调整边框颜色的顺序无关紧要 . 浏览器只是以不同的方式显示边框 . 角落中的像素从任一侧获得颜色，这取决于您使用的浏览器 .

    有几种不同的方法 . 以下是最常见的浏览器，以及它们如何绘制角落：

    Internet Explorer:

    +----------------------+--+
|                      |  |
+----------------------|  |
|  |                   |  |
|  |                   |  |
|  |                   |  |
|  +----------------------+
|  |                      |
+--+----------------------+

    Firefox:

    +--+----------------------+
|  |                      |
|  +----------------------+
|  |                   |  |
|  |                   |  |
|  |                   |  |
+----------------------|  |
|                      |  |
+----------------------+--+

    Chrome:

    +--+----------------------+
|  |                      |
|  |----------------------+
|  |                   |  |
|  |                   |  |
|  |                   |  |
|  +----------------------+
|  |                      |
+--+----------------------+

    Safari:

    +--+-------------------+--+
|  |                   |  |
|  |-------------------|  |
|  |                   |  |
|  |                   |  |
|  |                   |  |
|  +-------------------+  |
|  |                   |  |
+--+-------------------+--+

    Opera:

    +-------------------------+
|                         |
+-------------------------+
|  |                   |  |
|  |                   |  |
|  |                   |  |
|  +-------------------+  |
|  |                   |  |
+--+-------------------+--+

    看起来好像不同的浏览器供应商竭尽全力使用与所有其他浏览器不同的方法......

    （在最近的版本中测试 . 任何浏览器的旧版本可能会以不同的方式执行，但这并不重要，因为它们之间的差别很大 . ）

    因此，如果您需要完全控制角落的绘制方式，则可以在彼此内部使用两个元素，将垂直边框放在一个边框上，将水平边框放在另一个边框上 .

    回复于
  • 1

    所以，实际上这很简单

    border: solid 1px black;
border-right-style: hidden;

    通过赋予右边框隐藏的风格，它现在可以完美地工作 . 问题是隐藏样式的边框将位于折叠或覆盖边框的任何其他样式之前 .

    回复于
  • 17

    你可以像这样写：

    div{
 border:1px solid black;
 border-right-color:white;
}
    回复于

相关问题