【前端】如何实现遮罩模糊样式？

• Z时代
• 2024-01-10
• 分类：技术分享

如下图，渐变模糊

用linear-gradient似乎不能完美实现

 background: -webkit-linear-gradient(left, rgba(255, 255, 255, .8), #ffffff);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgba(255, 255, 255, .8), #ffffff);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, rgba(255, 255, 255, .8), #ffffff);
/* Firefox 3.6 - 15 */
background: linear-gradient(to right, rgba(255, 255, 255, .8), #ffffff);
/* 标准的语法（必须放在最后） */

最后效果

background: -webkit-linear-gradient(right, #fff, rgba(255, 255, 255), rgba(255, 255, 255, .6));
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left, #fff, rgba(255, 255, 255), rgba(255, 255, 255, .6));
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left, #fff, rgba(255, 255, 255), rgba(255, 255, 255, .6));
/* Firefox 3.6 - 15 */
background: linear-gradient(to left, #fff, rgba(255, 255, 255), rgba(255, 255, 255, .6));
border-radius: 100% 0 0 100%;

回答

css3 filter 滤镜

以上是 【前端】如何实现遮罩模糊样式？ 的全部内容， 来源链接： utcz.com/a/80996.html