使用 CSS3 滤镜模糊定义的边缘

发布于09月01日

我用这个代码模糊了一些图像

img {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

不过，图像的边缘也会变得模糊.有没有可能在保持边缘清晰的同时模糊图像？像是镶嵌模糊之类的吗？

img { filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); margin: -5px -10px -10px -5px; } div { overflow: hidden; }

<div><img src="http://placekitten.com/300" /></div>

使用 CSS3 滤镜模糊定义的边缘

推荐答案

输出

CSS

HTML

Css相关问答推荐

在Reaction中自定义ANTD日期选取器

为什么CSS flex似乎应用了两次内部元素的填充？

你能混合固定/相对定位吗？

如何通过重复的网格区域来简化网格布局？

为什么我的 React slick 轮播响应能力不起作用？

更改多边形外部的文本 colored颜色

禁用MUI DataGrid上的悬停效果

有没有办法在 CSS 字体速记中使用数字字体粗细？

当页面大小小于VH时，Tailwind CSS如何使页脚留在底部

包含tailwind 中固定纵横比框的内容

整个列的 CSS Grid Margin Top

如何制作一个div来包装两个浮动div？

无法使用 Bootstrap 3 更改占位符 colored颜色

CSS Select /样式第一个词

如何在 CSS 中绘制一个圆形扇区？

虚拟键盘激活时的屏幕样式

Bootstrap 4：导航内的多级下拉菜单

如何使 window.scrollTo() 效果平滑

CSS：悬停一个元素，多个元素的效果？

Rails 中正确的 SCSS assets资源 struct