[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fSVOJNVFTOZDr0QUuxfya6etQOXCdP6Dc3se3G7DEOwA":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":28,"notice":28,"visitCount":29,"commentCount":30,"keywords":31},119,"2024-07-30T03:15:24.417Z","前端-记录一下常用到的css效果代码-高斯模糊","## 一、文字换行\n### 1.1 word级别的换行\n```scss\n&-title {\n  font-family: \"gilroy-bold\";\n  font-size: 26rpx;\n  color: #BFBFBF;\n  word-wrap: break-word; // 这种是完整word的break\n}\n```\n![break-word的css样式](https://image.xinwei.ltd/image1722307469498.png)\n\n### 1.2 all任意位置换行\n```scss\n&-title {\n   font-family: \"gilroy-bold\";\n   font-size: 26rpx;\n   color: #BFBFBF;\n   word-break: break-all; // 任意位置break\n}\n```\n![break-all的css样式](https://image.xinwei.ltd/image1722307698985.png)\n\n\n## 二、高斯模糊\n### 2.1 给div后面的image或者video加模糊效果\n```scss\n.blur-effect {\n  -webkit-backdrop-filter: blur(32rpx); /* Add this line first, it fixes blur for Safari*/\n  backdrop-filter: blur(32rpx);  /* This line activates blur*/\n  transform: translateZ(0); /*启动GPU优化*/\n}\n```\n![image或video加背景高斯模糊](https://image.xinwei.ltd/image1722308902278.png)\n\n\n### 2.2 给image或者video直接加模糊效果\n```scss\n.blur-effect-filter {\n  filter: blur(32rpx); /*直接加在image、video上*/\n  transform: translateZ(0); /*启动GPU优化*/\n}\n```\n![image或video直接加高斯模糊](https://image.xinwei.ltd/image1722309036060.png)\n\n\n","记录一下日常用到的css效果代码，方便以后随时取用，像是文本换行、高斯模糊效果。word-wrap、word-break、backdrop-filter、filter。","https://image.xinwei.ltd/image1722307469498.png",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",32,{"id":24,"name":26,"parentId":21},"前端",[],"",165,0,"css effective,css codes,css效果,css record"]