使用CSS可推广蚀刻线效果？

Question

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

Below is an example in blue (the lines above the comment bubble/underneath the number "11")。我想我需要使用box-shadow，但不确定这是否是最佳方式。

如果我应该使用box-shadow，有没有人知道如何设置它的CSS值，这样就可以说灰线也适用于蓝线？

Answer 1

您可以使用半透明黑/白颜色的边框（使用rgba ），这会使底层颜色变暗/变浅。

http://dabblet.com/gist/4182495

的示例

使用:after / :before添加伪元素可为您添加第二级边框等提供额外的动力。

Answer 2

以下是该评论指标的略微简化的CSS，我使用Chrome网站开发人员工具找到了该文件：

.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元素，您将能够打开和关闭框阴影样式，这将显示它们如何创建插入效果。

Answer 3

我猜两个边界在一起：

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