[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f8KI6tOgCuZz3MXWNlpP554Tz20R3QzjYpESZncpbcHI":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":21,"subCategory":24,"comments":26,"status":17,"reason":32,"notice":32,"visitCount":37,"commentCount":17,"keywords":38},158,"2025-04-23T10:57:30.572Z","css效果记录-渐变边框，内容是透明或者高斯模糊","这篇文章用来记录我在开发中需要实现的一种css效果，效果是一个div，有渐变颜色的边框，但是中间内容区域是透明或者高斯模糊效果。作为记录，也可以供大家参考。\n\n## 最终效果\n首先我们来看看最后实现的效果图：\n![css gradient border with blur image](https://image.xinwei.ltd/image1745404358859.png)\n\n上面的效果，需要我们设置相关的css属性，所以我会将我尝试的效果思路列举一下，每一个尝试也是一种类似的css效果，也作为记录。\n\n> 最终效果的实现，在最后一步。\n\n## 尝试: 将background分为border box和padding-box\n这种方式的思路就是一个div，可以将background分为border和padding的2种box，当然还有content box，那么针对每一个box可以设置颜色渐变。\n\n效果是：\n![css gradient border](https://image.xinwei.ltd/image1745404759607.png)\n\n> 缺陷是padding-box不能设置为透明transparent，因为这种渐变是border包裹范围内background颜色渐变了，`border-box`包裹范围内的渐变像是盖在上面。所以如果`padding-box`是透明或者blur高斯模糊，那么就会漏出全部的`border-box`的渐变效果。\n\n这种效果的测试代码是：\n```test_1.html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" />\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    \u003Ctitle>test-1\u003C/title>\n  \u003C/head>\n  \u003Cbody>\n    \u003Cdiv class=\"gradient-border\">\u003C/div>\n  \u003C/body>\n  \u003Cstyle>\n    body {\n      background: rgb(33, 213, 168);\n    }\n    .gradient-border {\n      border-radius: 20px;\n      border: 10px solid transparent; // border渐变，必须要设置border宽度和颜色transparent.\n\n      width: 400px;\n      height: 200px;\n\n      background: linear-gradient(orange) padding-box,\n        linear-gradient(blue, green) border-box;\n\n      overflow: hidden;\n      /* clip: rect(0px, 400px, 200px, 0px); */\n    }\n  \u003C/style>\n\u003C/html>\n```\n\n所以这种方式，只能用在`padding-box`区域中，不显示底下内容的场景。\n\n\n## 高斯模糊效果\n这里简单实现一个高斯模糊效果，因为在我们的最终效果中，需要有高斯模糊，那么我们可以先看看如何实现高斯模糊效果，根据代码来发散思维。\n\n高斯模糊效果是：\n![css blur effect image](https://image.xinwei.ltd/image1745405113368.png)\n\n测试代码是：\n```test_2.html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" />\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    \u003Ctitle>Document\u003C/title>\n  \u003C/head>\n  \u003Cbody>\n    \u003Cdiv class=\"background\" id=\"divB\">\n      \u003C!-- This is Div B -->\n      \u003Ch1>This is Div B\u003C/h1>\n    \u003C/div>\n\n    \u003Cdiv class=\"overlay\" id=\"divA\">\n      \u003C!-- This is Div A -->\n      \u003Cp>This is Div A content\u003C/p>\n    \u003C/div>\n  \u003C/body>\n  \u003Cstyle>\n    body {\n      margin: 0;\n      padding: 0;\n      height: 100vh;\n      overflow: hidden;\n    }\n\n    .background {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      background: url(\"https://picsum.photos/800/600\") no-repeat center/cover; // 使用一个随机底图\n      z-index: 0;\n    }\n\n    .overlay {\n      position: absolute;\n      top: 100px;\n      left: 100px;\n      width: 300px;\n      height: 200px;\n      padding: 20px;\n      z-index: 1;\n\n      border-radius: 15px;\n\n      // 高斯模糊效果\n      backdrop-filter: blur(10px);\n      -webkit-backdrop-filter: blur(10px);\n\n      color: white;\n      border: 10px solid rgba(255, 255, 255, 0.3);\n    }\n  \u003C/style>\n\u003C/html>\n```\n\n从这里面可以看到高斯模糊效果是`backdrop-filter`来决定的，所以之前的`border-box`和`padding-box`尝试是无法应用到这种css属性设置。\n\n那么可以考虑使用`:before`和`:after`这2个伪标签，分别设置不同的渐变，当然这确实是可以的。\n\n\n## 最终实现代码\n```test.html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" />\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    \u003Ctitle>Document\u003C/title>\n  \u003C/head>\n  \u003Cbody>\n    \u003Cdiv class=\"background\" id=\"divB\">\n      \u003C!-- This is Div B -->\n      \u003Ch1>This is Div B\u003C/h1>\n    \u003C/div>\n\n    \u003Cdiv class=\"glass-border\" id=\"divA\">\n      \u003C!-- This is Div A -->\n      \u003Cp>This is Div A content\u003C/p>\n    \u003C/div>\n  \u003C/body>\n  \u003Cstyle>\n    body {\n      margin: 0;\n      padding: 0;\n      height: 100vh;\n      overflow: hidden;\n    }\n\n    .background {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      background: url(\"https://picsum.photos/800/600\") no-repeat center/cover; // 也用一个随机图做底色\n      z-index: 0;\n    }\n\n    .glass-border {\n      position: absolute;\n      top: 100px;\n      left: 100px;\n      width: 300px;\n      height: 200px;\n      padding: 20px;\n      z-index: 1;\n\n      background: transparent;\n\n      color: white;\n\n      border-radius: 15px;\n      position: relative;\n    }\n\n    .glass-border::before { // border渐变色的处理\n      content: \"\";\n      position: absolute;\n      top: -2px; // 内容是2px的border宽度\n      left: -2px;\n      right: -2px;\n      bottom: -2px;\n      z-index: -1; // 中间层\n      border-radius: inherit;\n      padding: 2px;\n\n      background: linear-gradient(135deg, #ff00cc, #3333ff); // 作为border的渐变颜色\n      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); // 使用mask将叠加效果的中间部分给透明掉\n      -webkit-mask: linear-gradient(#fff 0 0) content-box,\n        linear-gradient(#fff 0 0);\n      mask-composite: exclude;\n      -webkit-mask-composite: destination-out;\n    }\n\n    .glass-border::after { // 高斯模糊的处理\n      content: \"\";\n      position: absolute;\n      top: 0; // 直接是div A的区域设置为高斯模糊\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border-radius: inherit;\n      backdrop-filter: blur(10px);\n      -webkit-backdrop-filter: blur(10px);\n      z-index: -2; // 层级置于底部\n    }\n  \u003C/style>\n\u003C/html>\n```\n\n用于记录，也希望对大家有帮助。\n\n\n\n","这篇文章用来记录我在开发中需要实现的一种css效果，效果是一个div，有渐变颜色的边框，但是中间内容区域是透明或者高斯模糊效果。作为记录，也可以供大家参考。","https://image.xinwei.ltd/image1745404358859.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技术",{"id":21,"name":25,"parentId":21},"JavaScript&HTML&CSS",[27],{"id":28,"createAt":29,"content":30,"articleId":7,"userId":13,"user":31,"replyToUid":33,"replyToUser":34,"status":17,"statusDes":32,"replies":36},17,"2025-08-27T06:30:39.958Z","大家切记这里的要点：\n1. glass-border的z-index为1；\n2. glass-border::before的z-index为-1；\n3. glass-border::after的z-index为-2；",{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":32,"createdAt":20},"",0,{"phone":32,"userId":33,"nickName":32,"vipType":33,"avatar":32,"sign":32,"createdAt":35},"0001-01-01T00:00:00Z",null,44,"css gradient border,css blur,gradient border,blur effect,blur,渐变边框,高斯模糊,CSS效果"]