CSS边界半径和滤镜灰度无法一起使用

问题描述

我有一些使用边界半径和灰度滤镜的CSS。我希望边框半径始终保持在适当位置，但灰度在悬停时消失。

在我添加灰度之前，边框半径工作正常，然后停止工作，仅将图像显示为正方形。悬停时（移除过滤器时），边界半径会再次出现。有人知道我在想什么吗？

我已经搜索了，但是找不到答案。

.esg-entry-media {
    width: 250px;
    height: 250px;
    margin: 0 auto;
    -webkit-border-radius: 50% !important;
    border-radius: 50% !important;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.esg-entry-media:hover {
    border: solid 10px #fff !important;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

我提供了一个悬停状态和非悬停状态的图像作为参考。

解决方法

您可以使用div包裹图像，并在其上放置overflow: hidden;并赋予div相同的宽度和高度。然后放置边界半径：50％；在div。仅在图像上应用灰度。最后更改img做，

div:hover .esg-entry-media{
  filter: grayscale(0)
}

在包装div上，

div:hover {
  border: 10px solid *coloryouwant*
}

哪个浏览器？对我来说很好用（chrome，firefox，safari）：

.esg-entry-media {
    width: 250px;
    height: 250px;
    border: 10px solid transparent;
    border-radius: 50%;
    filter: grayscale(100%);
}

.esg-entry-media:hover {
    border-color: #a00;
    filter: grayscale(0%);
}

<img src="http://placekitten.com/200/300" class="esg-entry-media" />

border-radius css-filters grayscale