在Twitter上显示Gravatar周围的Inset Border

Question

我希望我的网站项目上的我的gravatar图像显示如下：

如何在CSS中实现？

更新

让我描述一下我想要的东西：

• HTML图片代码，长40像素
• CSS类：
  • 围绕所有4个边缘制作圆形边框
  • 在图像内投射阴影（插入阴影），但非常微妙

对于演示，请点击https://twitter.com，登录，然后在右上角看到头像。

Answer 1

如果你使用开发者工具，你可以看到Twitter在那里使用::before伪选择器向头像添加内部box-shadow，这是一个演示，我在这里进行了演示。为您创建： jsFiddle 。

HTML：

<a href="#" id="twitterimage"><img src="// image URL" /></a>

CSS：

#twitterimage, #twitterimage img {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}
#twitterimage:before {
    display: block;
    content:'';
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.2);
}

Answer 2

右键点击图片 - ＆gt;检查元素，然后查看Style / Css选项卡。

我认为这样做（与inspect元素一起发现）：

img.avatar {
    border-color: rgb(102, 117, 127);
    border-image-width: 1px;
    border-radius: 4px;
}

**编辑：这是我的计算样式面板的副本**

font-family "Helvetica Neue",​Helvetica,​Arial,​sans-serif
font-size   13px
font-weight 500
color   rgb(102,​ 117,​ 127)
line-height 13px
text-align  left
width   32px
height  32px
border-top-width    0px
border-right-width  0px
border-bottom-width 0px
border-left-width   0px
border-top-color    rgb(102,​ 117,​ 127)
border-right-color  rgb(102,​ 117,​ 127)
border-bottom-color rgb(102,​ 117,​ 127)
border-left-color   rgb(102,​ 117,​ 127)
border-top-style    none
border-right-style  none
border-bottom-style none
border-left-style   none
border-image    
border-top-left-radius  4px
border-top-right-radius 4px
border-bottom-left-radius   4px
border-bottom-right-radius  4px
border-image-outset 0 0 0 0
border-image-repeat stretch stretch
border-image-slice  100% 100% 100% 100%
border-image-source none
border-image-width  1 1 1 1
cursor  pointer
list-style-image    none
list-style-position outside
list-style-type none