多边框，填充，图像周围

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

虽然我为此搜索，但我只发现了examples like this多边框直接围绕对象使用方框阴影。

我试图创建这只是使用图像周围的边框和填充。但是填充效果甚至没有解决，像上面这个例子中的盒子阴影一样，我不会得到像我想要的东西。

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

编辑：对不起，忘了展现我所目前有：code pen link

This is what I want to make

来源

2013-10-30 ronnyrr

什么是您当前的标记/ CSS是什么样子？ – George

显示您的代码... – chris

目前我拥有此：http://cdpn.io/qxFpj – ronnyrr

易peasy！

填充，边框和几箱阴影将做的伎俩。

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

Fiddle

来源

2013-10-30 10:05:32

真棒，正是我想要的！：D – ronnyrr

使用您的CSS更新了我的代码笔！看起来很棒，谢谢！：D见：http://codepen.io/Ronnyrr/pen/qxFpj – ronnyrr

不错的工作伙伴:) –

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

http://jsfiddle.net/chriscoyier/Vm9aM/

box-shadow: 
    0 0 0 10px hsl(0, 0%, 80%), 
    0 0 0 15px hsl(0, 0%, 90%);

这里是从利·贝罗箱阴影另一个例子。

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

来源

2013-10-30 09:56:02 chris

感谢您的回复，但这不是我要找的。我需要在所有边界之间有一定距离。不管怎么说，还是要谢谢你。 – ronnyrr

这可能帮助你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); 
}

来源

2013-10-30 09:58:51

+1看起来不错.. :) – 2013-10-30 10:00:14

这看起来像我想要的。我将尝试将其插入到我自己的代码中，谢谢！：D – ronnyrr

@ronnyrr很高兴听到去吧.. :) –

在制定您的标记，如果可以使用背景图片，而不是这种强烈推荐内嵌图像元素。一对夫妇的原因，但2点主要是：

内联IMG元素不能使用CSS伪类：之前和：后
内嵌图像难以掩盖边角采用边界半径时，特别是会带来多重边界。

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

来源

2013-10-30 09:59:00 DMTintner

你的笔没有输出？ –

resaved it again – DMTintner

是的..不错.. .. :) –

你的意思是这样的：

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-30 09:59:30

似乎我想要的！但@Tigran Petrossian他的代码使用较少的HTML/CSS，因此好一点。不管怎么说，还是要谢谢你。 – ronnyrr

<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-30 10:02:56

多边框，填充，图像周围

回答

相关问题