圆圈中的图像
圆圈中的图像
提问于 2014-03-09 00:30:45
假设我有以下图像：
在我的网站上，我想把它围成这样的圆圈：
问:用CSS可以做到这一点吗？如果是，哪个选项更好，用圆圈物理制作图像还是使用CSS制作图像？
回答 3
Stack Overflow用户
发布于 2014-03-09 00:38:42
CSS是，您可以使用创建
检查此实时jsFiddle
HTML
<div id="outbody">
<img class="img-circle" src="http://i.stack.imgur.com/Ysyvw.png">
</div>CSS
#outbody
{
width:35%;
padding:10px;
background-color:#fe0000;
}
.img-circle {
width: 90%;
border: 10px solid white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 0px 15px rgba(0,0,0,1);
-moz-box-shadow: 0 0px 15px rgba(0,0,0,1);
box-shadow: 0 0px 15px rgba(0,0,0,1);
}Stack Overflow用户
发布于 2014-03-09 00:47:45
除了@Jay Patel场景之外，你还可以尝试一下：
HTML
<div id="container">
<img class="img-circle" src="http://i.stack.imgur.com/Ysyvw.png" />
</div>CSS
.img-circle {
width: 90%;
border: 10px solid white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 5px 12px rgba(0,0,0,1);
-moz-box-shadow: 0 5px 12px rgba(0,0,0,1);
box-shadow: 0 5px 12px rgba(0,0,0,1);
}
#container
{
background-color:red;
width:35%;
padding:10px;
}演示: here
Stack Overflow用户
发布于 2014-03-09 00:53:15
如果您想要内部放置阴影，可以对box-shadow使用inset选项。
JSFiddle Demo
HTML
<div class=circle>
<div class=image>
</div>CSS
.circle {
background : red;
display : inline-block;
}
.circle .image {
margin : 10px;
border-radius : 50%;
width : 250px;
height : 250px;
box-shadow : inset 0 0 30px #000000;
background-image : url(http://i.stack.imgur.com/Ysyvw.png);
background-position : 50%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22271962
复制相关文章
相似问题
腾讯云开发者
