6

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

虽然我对此进行了谷歌搜索，但我只找到了这样的示例，使用框阴影直接在对象周围有多个边框。

我尝试在图像周围使用边框和填充来创建它。但是填充甚至没有解决，并且像上面的示例中那样使用 box-shadow 我不会得到我想要的东西。

你们将如何处理这个问题，甚至有可能吗？

编辑：对不起，忘记显示我目前拥有的：代码笔链接

这就是我想做的

4

6 回答 6

10

十分简单！

填充、边框和几个盒子阴影可以解决问题。

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

小提琴

于 2013-10-30T10:05:32.920 回答
3

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

  1. 内联 img 元素不能使用 css 伪类，:before 和 :after
  2. 使用边框半径时，内联图像更难掩盖角落，尤其是使用多个边框时会很棘手。

此外，这意味着可以完全使用一个 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

于 2013-10-30T09:59:00.120 回答
1

这可能会帮助你参考这个小提琴

.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);
}
于 2013-10-30T09:58:51.053 回答
0

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

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

于 2013-10-30T09:56:02.767 回答
0

你的意思是这样的：

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;
}
于 2013-10-30T09:59:30.963 回答
0 
<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;

}
于 2013-10-30T10:02:56.967 回答