内边框 CSS - 可能答案

【问题标题】：Inner border CSS - Possible内边框 CSS - 可能
【发布时间】：2014-05-08 11:46:31
【问题描述】：

我想知道是否有用于设置元素的外边框和内边框的属性，例如，我希望将深灰色边框作为外边框，将白色作为内边框。我附上了一张图片来说明我的观点，我可以用 2 层来做到这一点，一层是深灰色边框的父级，另一层是白色边框的子级，但必须有更好和有效的方法。请指导您是否有实现此目标的正确概念。感谢您抽出宝贵时间。cheers

【问题讨论】：

标签： css

【解决方案1】：

您可以使用插入框阴影。 DEMO

button {
    border: solid 1px #aaa;

    // Adds the inner "border"
    box-shadow: 0 0 1px #fff inset;

    background-image: linear-gradient(to bottom, #cfcfcf 0%, #c0c0c0 100%);
    padding: 20px;
    border-radius: 10px;
}

如果你想设置边框的“宽度”，你可以使用第四个值。带有 3px 宽的插入框阴影的示例：

box-shadow: 0 0 0 3px #fff inset;

更多关于 box-shadows 的信息，MDN

【讨论】：

是的，最好和最有效的方法 :) 这真的很酷.. 谢谢.. 节省了我一些时间.. 感激..
不客气！如果它解决了您的问题，请接受答案:)

【解决方案2】：

改用 CSS3 渐变。离开你的外边界，在距离边缘几个像素的地方停下来。你可以在这里试验一下：

http://www.colorzilla.com/gradient-editor/

【讨论】：

只适用于上/下或左/右边框，对吧？我敢打赌，使用这种方法实现这一目标的代码看起来很糟糕......