Question

我想在我的图像周围创建多个边框，带有一些填充，如下所示。我更喜欢用CSS做这个，但我不知道这是否可行。

当我用Google搜索时，我发现 examples like this 使用框阴影在对象周围直接有多个边框。

我尝试使用边框和图片周围填充来创建它。但填充甚至没有成功，并且像上面的例子中的盒子阴影我不会得到像我想要的东西。

你们怎么处理这个问题，甚至可能吗？

编辑：抱歉，忘记显示我目前拥有的内容：code pen link

This is what I want to make

Answer 1

轻松自在！

填充，边框和几个框阴影都可以解决问题。

img {    
    border-radius: 50%;
    padding: 3px;
    border: 1px solid #ddd;
    box-shadow: 0 0 0 7px #fff, 
                0 0 0 8px #ddd;
}

Fiddle

Answer 2

在设计标记时，如果可能使用bg图像而不是内联图像元素，强烈建议使用此标记。有几个原因，但主要有两个：

内联img元素不能使用css伪类，：before和：后
使用边框时，内嵌图像更难掩盖角落半径，特别是多边框的特殊情况。

此外，这意味着可以使用一个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属性添加真实边框，然后可以更进一步使用伪类添加边框，每个伪类都可以使用自己的边框和框阴影属性。

这里另一个值得注意的地方是使用background-size属性，这对于在按边框切割时按比例缩放图像非常有用。特别是在处理用户生成的图像或可变尺寸的图像时。应添加供应商前缀以实现跨浏览器兼容性

这是一个带有示例的codepen。 http://codepen.io/anon/pen/dKxbh

Answer 3

这可能对您有所帮助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);
}

Answer 4

我认为链接正是这样做的正确方法！我会用盒子阴影。

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的盒子阴影的例子。

http://lea.verou.me/css3-secrets/#multiple-outlines

Answer 5

你的意思是这样的：

jsFiddle

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;
}

Answer 6

<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;

}

多个边框，带有填充，图像周围

6 个答案: