[英]4 gradient borders in CSS
我需要帮助在盒子的所有 4 个边上应用渐变边框。 我试过了,但它只适用于两侧。 查看所有链接和SO答案后,我得到了这个:
.test{ height:250px; border: 2px solid; border-image: linear-gradient(to left,rgba(78,137,176,1) 1%, rgba(115,192,85,1) 100%) 100% 0 100% 0/2px 0 2px 0; padding-top:50px; }
<div class="test"> This is a box and I want borders for all the sides </div>
我将不胜感激任何帮助。 我正在尝试类似于下图的东西。 谢谢你。
使用背景图像:(产生与您的图像完全相同的输出)
您似乎在每侧都有不同的渐变,因此很难使用border-image
属性来实现这一点。 您可以尝试使用如下代码段中的background-image
来模仿行为。
基本上,下面的代码片段的作用是为 4 个边中的每一个创建渐变作为渐变背景图像条,然后使用background-position
将它们放置在正确的位置。
parent 上的透明边框是一个占位符,模仿的边框最终会出现在那里。 background-origin: border-box
使元素的背景从border-box
区域本身开始(而不是padding-box
或content-box
)。 这两个只是避免在background-position
使用不必要的calc
东西的额外步骤。
.test { height: 250px; border: 2px solid transparent; background-image: linear-gradient(to right, rgb(187, 210, 224), rgb(203, 231, 190)), linear-gradient(to bottom, rgb(114, 191, 87), rgb(116, 191, 86)), linear-gradient(to left, rgb(204, 233, 187), rgb(187, 210, 224)), linear-gradient(to top, rgb(84, 144, 184), rgb(80, 138, 176)); background-origin: border-box; background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; background-position: top left, top right, bottom right, bottom left; background-repeat: no-repeat; padding-top: 50px; }
<div class="test"> This is a box and i want border for all the side </div>
使用边框图像:(在所有 4 个边上产生一个边框,但与您的图像输出不同)
您可以使用border-image
属性获得的最佳输出如下,但正如您从演示中看到的,它与您的图像(或第一个片段的输出)不完全相同:
.test { height: 250px; border: 2px solid; border-image: linear-gradient(to left, rgba(78, 137, 176, 1) 1%, rgba(115, 192, 85, 1) 100%); border-image-slice: 1; padding-top:50px; }
<div class="test"> This is a box and i want border for all the side </div>
我以这种方式为自己意识到了这一点:
背景图像内的背景变化。
div { width: 170px; height: 48px; border-style: solid; border-width: 2px; border-image-source: linear-gradient(to bottom, #fff042, #ff5451); border-image-slice: 1; background-image: linear-gradient(to bottom, #f9e6e6, #c5e0c3), linear-gradient(to bottom, #fff042, #ff5451); background-origin: border-box; background-clip: content-box, border-box; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
<div>text</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.