html - 使用 CSS 可概括蚀刻线效果？

Question

我想开发一个通用的解决方案来创建蚀刻线。目标是不必为我想要蚀刻的每个配色方案手动选择密切相关的颜色。这个问题似乎是相对于背景颜色的缩进部分的颜色对于创建 3 维效果有些关键。

下面是一个蓝色示例（注释气泡上方/数字“11”下方的行）。我想我需要使用box-shadow但不确定这是否是最好的方法。

如果 box-shadow 是我应该使用的，有谁知道如何设置它的 CSS 值，这样灰线也适用于蓝线？

Answer 1

您可以使用带有半透明黑/白颜色（usingrgba）的边框，这将使底层颜色变暗/变亮。

http://dabblet.com/gist/4182495上的示例

:after使用/添加伪元素可以:before让您在添加二级边框等方面获得额外的力量。

Answer 2

这是该评论指示器的稍微简化的 CSS，我使用 Chrome Web Developer 工具找到了它：

.media-bar .count-badge {
    padding: 0 7px;
    background: #1C5380;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

如果您访问该页面并检查 count-badge 元素，您将能够打开和关闭 box-shadow 样式，这将显示它们如何创建插入效果。

Answer 3

我想有两个边界在一起：

border-bottom: 1px solid #1C5380;
border-top: 1px solid rgba(255, 255, 255, 0.12);