blur()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年9月.
blur() CSS 方法将高斯模糊应用于输出图片。结果为 <filter-function>.
尝试一下
filter: blur(0);
filter: blur(4px);
filter: blur(1.5rem);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
语法
blur(radius)
值
示例
css
blur(0) /* No effect */
blur(8px) /* Blur with 8px radius */
blur(1.17rem) /* Blur with 1.17rem radius */