如何創建如圖所示的漸變邊框

Question

我需要像這里這樣以漸變方式在兩側設置邊框，如此處所示。但是，我的代碼如下所示：

 body { height: 100vh; margin: 0; display: grid; place-items: center; background: #ffffff; }.module-border-wrap { max-width: 320px; padding: 1rem; position: relative; background: linear-gradient(to right bottom, #ffffff, #21BAE3); padding: 6px; }.module { background: #222; color: white; padding: 2rem; }

 <div class="module-border-wrap"><div class="module"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. </div></div>

如何創建如圖所示的邊框？

Answer 1

您需要稍微更改一下漸變 CSS

 body { height: 100vh; margin: 0; display: grid; place-items: center; background: #ffffff; }.module-border-wrap { max-width: 320px; padding: 1rem; position: relative; background: linear-gradient(130deg, rgba(248,253,254,1) 50%, rgba(33,186,227,1) 100%); padding: 6px; border-radius: 1.5rem 1.5rem 0 1.5rem; }.module { background: #222; color: white; padding: 2rem; border-radius: 1.5rem 1.5rem 0 1.5rem; } </style>

 <div class="module-border-wrap"><div class="module"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. </div></div>

Answer 2

使用background-origin: border-box; 然后在您的邊框上使用透明顏色。 這會將背景圖像移動到您的邊框邊緣並顯示在您的邊框下方。 overflow:hidden 然后正確剪輯 your.module div 中的內容。 見下文。

 body { height: 100vh; margin: 0; display: grid; place-items: center; background: #ffffff; }.module-border-wrap { border-radius: 2rem 2rem 0 2rem; border: 6px solid transparent; overflow: hidden; background-image: linear-gradient(to right bottom, #fff, #25BAE4); background-origin: border-box; max-width: 320px; }.module { background: #222; color: white; padding: 2rem; }

 <div class="module-border-wrap"><div class="module"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. </div></div>