我想在我的图像周围创建多个边框，并带有一些填充，如下所示。我更喜欢只用 CSS 来做这件事，但我不知道这是否可行。
虽然我用谷歌搜索了这个，但我只发现 examples like this 使用盒子阴影直接在对象周围有多个边框。
我尝试在图像周围使用边框和填充来创建它。但是填充甚至都没有解决，并且像上面的示例中那样使用 box-shadow 我不会得到我想要的东西。
你们将如何处理这个问题，甚至有可能吗？
编辑： 抱歉，忘记显示我目前拥有的内容：code pen link
【问题讨论】：
我认为该链接正是这样做的正确方法！我会使用盒子阴影。
http://jsfiddle.net/chriscoyier/Vm9aM/
box-shadow:
0 0 0 10px hsl(0, 0%, 80%),
0 0 0 15px hsl(0, 0%, 90%);
这是另一个来自 Lea Verou 的箱形阴影示例。
【讨论】：
这可能会帮助你refer this fiddle
.round{
width:150px;
height:150px;
border-radius:50%;
border:10px solid #fff;
background-color: #eaeae7;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
}
【讨论】：
在设计您的标记时，如果可能的话，强烈建议使用 bg 图像而不是内联图像元素。有几个原因，但主要有两个：
另外，这意味着这个设计可以完全使用一个 div 来创建。以下是我的做法：
HTML
<div class="thumbnail"></div>
CSS
.thumbnail {
height: 50px; width: 50px;
border-radius: 50px;
background: url(http://www.tapdog.co/images/welcome/satelite-bg.jpg) no-repeat;
background-size: cover;
border: solid 1px #aaa;
box-shadow: 0 0 0 4px #eee, 0 0 0 5px #aaa;
}
这里的关键点是您可以使用 box-shadow 创建任意数量的伪边框。您仍然可以使用border 属性添加真正的边框，然后可以更进一步使用伪类添加边框，每个伪类都可以使用自己的border 和box-shadow 属性。
这里的另一个值得注意的点是使用 background-size 属性，它可以非常有助于让图像在被边框切割时按比例缩放。特别是在处理用户生成的图像或可变大小的图像时。应为跨浏览器兼容性添加供应商前缀
这是一个带有示例的代码笔。 http://codepen.io/anon/pen/dKxbh
【讨论】：
你的意思是这样的：
HTML：
<div class="container">
<div class="inner"></div>
</div>
CSS：
.container{
width:100px;
height:100px;
padding:10px;
background:white;
border:1px solid #555;
border-radius:50%;
}
.inner{
width:100%;
height:100%;
background:tomato;
border:1px solid #555;
border-radius:50%;
margin-top:-1px;
margin-left:-1px;
}
【讨论】：
<div class="border"> bipin kumar pal</div>
.border {
border: 5px solid hsl(0, 0%, 40%);
padding: 5px;
background: hsl(0, 0%, 20%);
outline: 5px solid hsl(0, 0%, 60%);
box-shadow:
0 0 0 10px hsl(0, 0%, 80%),
0 0 0 15px hsl(0, 0%, 90%);
color:#fff;
}
【讨论】：
简单易懂！
填充、边框和几个盒子阴影可以解决问题。
img {
border-radius: 50%;
padding: 3px;
border: 1px solid #ddd;
box-shadow: 0 0 0 7px #fff,
0 0 0 8px #ddd;
}
【讨论】：