CSS插入边框颜色不正确

Question

我正在尝试使用带有浅色的边框插图，但是，选择的颜色根本没有正确显示，这在每个浏览器中都是相同的

这是css - 第一个框应该有浅插图边框，第二个框应该稍暗：

这里有一个小提琴：CSS inset border Fiddle

.box1 {
display: inline-block;
border: 4px inset #f7f7f7;
margin-top: 16px; 
border-radius: 12px;
height: 34px;
background:#fff;
width:230px;
position:relative;
padding:10px;
}

.box2 {
display: inline-block;
border: 4px inset #cccccc;
margin-top: 16px;
border-radius: 12px;
height: 34px;
background:#f7f7f7;
width:230px;
position:relative;
padding:10px;
}

我尝试过分别设置border-color元素，但没有区别

很奇怪的行为？

Answer 1

这是插入边框在规范（http://www.w3.org/TR/CSS2/box.html#border-style-properties）中的工作方式。底部和右侧比顶部和左侧轻;后两者是设定的颜色。有关所有边框选项，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/border-style。