前端-记录一下常用到的css效果代码-高斯模糊

声明：作者声明此文章为原创，未经作者同意，请勿转载，若转载，务必注明本站出处，本平台保留追究侵权法律责任的权利。

全栈老韩

全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。

一、文字换行

1.1 word级别的换行

scss 复制代码

&-title {
  font-family: "gilroy-bold";
  font-size: 26rpx;
  color: #BFBFBF;
  word-wrap: break-word; // 这种是完整word的break
}

1.2 all任意位置换行

scss 复制代码

&-title {
   font-family: "gilroy-bold";
   font-size: 26rpx;
   color: #BFBFBF;
   word-break: break-all; // 任意位置break
}

二、高斯模糊

2.1 给div后面的image或者video加模糊效果

scss 复制代码

.blur-effect {
  -webkit-backdrop-filter: blur(32rpx); /* Add this line first, it fixes blur for Safari*/
  backdrop-filter: blur(32rpx);  /* This line activates blur*/
  transform: translateZ(0); /*启动GPU优化*/
}

2.2 给image或者video直接加模糊效果

scss 复制代码

.blur-effect-filter {
  filter: blur(32rpx); /*直接加在image、video上*/
  transform: translateZ(0); /*启动GPU优化*/
}

发布于2024-07-30 03:15:24

浏览量161·

暂无评论，快来发表第一条评论吧