Question

我需要一个用于图像内部边框模糊的css代码。请参阅http://i.stack.imgur.com/w6KNa.jpg

.effet {
	width: 400px;
	height: 125px;
	margin: 0 auto 50px auto;
}
.profile-box{
    width: 150px;
    height: 150px;
    margin-left: 40px;
    border: none !important;
    padding: 19.5px 10px;
    display: block;
}
.min_cir{
border-radius: 50%;
}
.filtre--r {
    -webkit-mask: -webkit-radial-gradient( center, closest-side, transparent 30%, black 80%);
    -webkit-mask: radial-gradient( closest-side at center, transparent 50%, black 110%);
    -webkit-filter: blur(5px);
    mask: url('#mask-radial');
    filter: url('#filtre1');
	margin-top: -307px;
}

<div class="profile-box">
	<div class="media">
		<a class="pull-left" href="">
			<!--<img class="img-circle" src="">-->
			<div class="effet">
			<img class="min_cir" src="http://i.imgur.com/oH1698V.jpg">
			<img class="filtre filtre--r min_cir" src="http://i.imgur.com/oH1698V.jpg">
			</div>
		</a>
	</div>
</div>

它有效，但不像修正的模糊边框..它使用渐变样式..任何人都可以帮助我在CSS中制作“固定边框和圆形与模糊”图像谢谢。

Answer 1

你可能想要这个。只需将图像定位absolute并将transform: scale(1.1);赋予模糊图像。

＆＃13;

.effet {
	width: 400px;
	height: 125px;
	margin: 0 auto 50px auto;
}
.profile-box{
    width: 150px;
    height: 150px;
    margin-left: 40px;
    border: none !important;
    padding: 19.5px 10px;
    display: block;
}
.min_cir{
border-radius: 50%;
  border-radius: 50%;
    position: absolute;
    top: 0;
}
.filtre--r {
    -webkit-mask: -webkit-radial-gradient( center, closest-side, transparent 30%, black 80%);
    -webkit-mask: radial-gradient( closest-side at center, transparent 50%, black 110%);
    -webkit-filter: blur(5px);
    mask: url('#mask-radial');
    filter: url('#filtre1');
	transform: scale(1.1);
    position: absolute;
    top: 0;
}

＆＃13;

<div class="profile-box">
	<div class="media">
		<a class="pull-left" href="">
			<!--<img class="img-circle" src="">-->
			<div class="effet">
			<img class="min_cir" src="http://i.imgur.com/oH1698V.jpg">
			<img class="filtre filtre--r min_cir" src="http://i.imgur.com/oH1698V.jpg">
			</div>
		</a>
	</div>
</div>

＆＃13;

Answer 2

看起来你几乎就在那里我会用两个图像来解决这个问题;

A层| z-index:1 一个div，其中background-image是个人资料图片。然后我会用css3模糊模糊图像。

B层| z-index:2 将是这张照片上的个人资料照片

查看此stackoverflow问题以获得一些指导。你的情况非常相似。祝好运！ How to apply a CSS 3 blur filter to a background image

如何在CSS中为圆形轮廓图片制作圆角blured边框

2 个答案: