遮罩渐变

CSS | 实现无缝渐变模糊效果（类似 macOS / HyperOS）

2026年7月10日

我的想法我想实现类似下面这两张图的无边界渐变模糊效果：然而，今天在逛一个网站时偶然看到了这种完美的效果！ […]

#st-static{display:block} #st-static{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif;color:#333;background:#fff;line-height:1.7;padding:0 20px} #st-static .cf-container{max-width:780px;margin:0 auto;padding:20px 0} #st-static .cf-header{padding:20px 0;border-bottom:1px solid #eee;margin-bottom:30px} #st-static .cf-header__logo{font-size:1.5rem;font-weight:700;color:#000;text-decoration:none} #st-static .cf-header__desc{color:#666;font-size:.875rem;margin-top:4px} #st-static .cf-page-title{font-size:1.75rem;font-weight:700;margin-bottom:24px} #st-static .cf-posts{display:flex;flex-direction:column;gap:24px} #st-static .cf-post{padding-bottom:24px;border-bottom:1px solid #f0f0f0} #st-static .cf-post__title{font-size:1.25rem;font-weight:600;margin-bottom:6px} #st-static .cf-post__title a,#st-static .cf-single__body a{color:#1a0dab;text-decoration:none} #st-static .cf-post__meta,#st-static .cf-single__meta{font-size:.8125rem;color:#888;margin-bottom:8px} #st-static .cf-post__excerpt{font-size:.9375rem;color:#444} #st-static .cf-single__title{font-size:2rem;font-weight:700;margin-bottom:12px;line-height:1.3} #st-static .cf-single__body{font-size:1rem;line-height:1.8} #st-static .cf-single__body img{max-width:100%;height:auto} #st-static .cf-single__body pre{background:#f5f5f5;padding:1em;overflow-x:auto;border-radius:4px;font-size:.875em} #st-static .cf-pagination{margin-top:24px;display:flex;gap:16px} #st-static .cf-footer{margin-top:40px;padding-top:16px;border-top:1px solid #eee;font-size:.8125rem;color:#999;text-align:center} #st-static .cf-empty{color:#999;font-style:italic}