Css 在不影响边框的情况下在图像上添加悬停

我有一个图像和一个边框，我只想给图像添加模糊悬停，但模糊覆盖了图像和边框，这是代码

.ex{
边界半径：1000px；
右边距：20px；
边框：10px实心#fff；
溢出：隐藏
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
-ms转换：所有1秒轻松；
过渡：所有的1容易；
}
例：悬停{
-webkit过滤器：模糊（5px）；
光标：指针；

---

您可以将图像包装在父元素中，然后使用该元素创建圆边界，并为其提供正的

z索引

，以便在应用

过滤器时图像不会弹出


.wrap{
宽度：200px；
高度：200px；
右边距：20px；
位置：相对位置；
}
.包裹{
边界半径：100%；
溢出：隐藏；
z指数：1；
}
前任{
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
-ms转换：所有1秒轻松；
过渡：所有的1容易；
最大宽度：100%；
显示：块；
}
.wrap:悬停{
光标：指针；
}
.wrap:hover.ex{
-webkit过滤器：模糊（5px）；
}
用div包装图像，设置div大小和溢出：隐藏，然后将其存档

.img-wrapper-for-blur {
        border-radius: 1000px;
        width: 200px;
        height: 200px;
        overflow: hidden;
    }

从.ex样式中删除边框半径和由此更改的标记：

<div class="img-wrapper-for-blur">
    <img src="img/13.jpg" alt="" width="200" height="200" class="ex">
</div>

不使用边框，您可以将图像包装在
div
中，给
div
一些填充和白色背景，然后在图像上保留模糊

HTML

这里有一个小问题：
@majidmashmool你在使用哪个浏览器？我在firefox或chromesorry中没有看到它。这是我的错误，我在css代码中加了2个句号
<div class="border">
  <img src="http://www.placehold.it/200x200" alt="" width="200" height="200" class="ex">
</div>

.ex {
  border-radius: 100%;
  overflow: hidden -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.ex:hover {
  -webkit-filter: blur(5px);
  cursor: pointer;
}

.border {
  border-radius: 100%;
  margin-right: 20px;
  background-color: #fff;
  display: inline-block;
  padding: 10px;
}