为什么边框半径的颜色比边框颜色浅？

Question

这是我在页面中使用的代码：

    <ul class="tabs">
                <li style="border-left:1px solid #006699;">
                  <input type="radio" name="tab1" id="som" value="0"> 

                  <label for="som">Venta</label>


                </li>
                <li>
                  <input type="radio" name="tab1" id="som1" value="1">
                  <label for="som1">Aliquera</label>

                </li>
                <li>
                  <a href="http://www.google.com">
                  <label for="tab3">YO Busco</label>
                  </a>
                </li>
            </ul>

css

.tabs input[type=radio] {
          position: absolute;
          top: -9999px;
          left: -9999px;
      }
      .tabs {
        width: 95%;
        float: none;
        list-style: none;
        position: relative;
        padding: 0;
        margin: 0px auto;
      }
      .tabs li{
        float: left;
        border:1px solid #006699;
border-left:none;
        border-radius:10px 10px 0 0;
        border-bottom:none;
        width:31%;
        background-color:#EDF6FA;
      }
      .tabs label {
          display: block;
          padding: 10px 10px;
          border-radius: 10px 10px 0 0;
          color: #08C;

          cursor: pointer;
          position: relative;

          -webkit-transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
      }


      [id]:checked + label {
        background: #006699;
        color: #ffffff;

      }

我在这里有两个问题：

1.如果我们仔细看选项卡，我们会发现圆角边框颜色比边框颜色浅。我不知道为什么会这样。我希望它与边框颜色相同。

2.当我们单击其中一个选项卡时，它会更改颜色。但是如果我们仔细观察，可以看到边框半径和背景颜色之间存在间隙。

请有人帮助我解决这个问题。js fiddle链接是http://jsfiddle.net/ec8Hq/。

- user3350169

Answer 1

这是由于使用了次像素渲染。如果笔画比一个像素更粗，颜色差异将无法识别。

对于后续的选项卡，您还可以从蓝色渐变到透明。我用margin-left: -1px;替换了border-left: none;，现在颜色差异更加微妙。您不能对其余部分做太多调整（除非增加边框宽度）。

负边距代替缺失的左边框示例： http://jsfiddle.net/ec8Hq/2/ 另外，查看您的示例是否在高分辨率屏幕上（即Retina显示器）也出现了这种效果。

有时，如果使用盒阴影而不是边框，还可以实现更平滑的彩色边框。

更新：

第二个问题的解决方案A)是仅在最外层标签元素上设置border-radius定义，并使用overflow: hidden;来强制子元素也使用该半径。

更聪明的方法B)是根本不要为列表项设置样式，而是将任何颜色定义移动到标签元素中。请参见：http://jsfiddle.net/ec8Hq/5/

- feeela

Answer 2

修改边框半径：（10px 改成 7px）

.tabs li{
        float: left;
        border:1px solid #006699;
        border-left:none;
        border-radius:10px 7px 0 0;
        border-bottom:none;
        width:31%;
        background-color:#EDF6FA;
      }

- Ramki