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.当我们点击标签时，它会改变颜色。但是如果我们仔细观察它们，我们可以看到它们之间存在差距。   border-radius和background color。

请任何人帮助我。这个小提琴是http://jsfiddle.net/ec8Hq/

Answer 1

这是因为使用了子像素渲染。如果笔划比一个像素厚，则颜色差异将无法识别。

对于后续标签，您也会从蓝色渐变为透明。我将border-left: none;替换为margin-left: -1px;，色差现在更加微妙。你不能对其余部分做很多事情（除了增加边框宽度）。

负边距而不是丢失左边框示例：http://jsfiddle.net/ec8Hq/2/

还可以在高分辨率屏幕（即视网膜显示屏）上查看您的示例，看看是否也出现了这种效果。

如果您使用框阴影而不是边框，有时您也可以获得更平滑的彩色边框。

<强>更新

解决方法 A）第二个问题是仅在最外面的选项卡元素上设置border-radius定义，并使用overflow: hidden;强制子元素的半径。

更智能的方法 B）将根本不设置列表项的样式并将任何颜色定义移动到标签元素。请参阅：http://jsfiddle.net/ec8Hq/5/

Answer 2

更改边框半径：(10px to 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;
      }

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

CSS

2 个答案: