html边框渐变隐藏,html – CSS中的4个渐变边框

使用背景图像:(产生精确的输出作为图像)

您似乎每侧都有不同的渐变,因此使用border-image属性很难实现这一点.您可以尝试使用背景图像模仿行为,如下面的代码段所示.

基本上下面的代码片段就是它为4个边中的每个边创建渐变作为渐变背景图像条,然后使用背景位置将它们放置在正确的位置.

父级上的透明边框是一个占位符,模仿的边框最终会出现. background-origin：border-box使元素的背景从边框区域本身开始(而不是填充框或内容框).这两个只是额外的步骤,以避免在后台位置使用不必要的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;

}

This is a box and i want border for all the side

使用边框图像:(在所有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;

}

This is a box and i want border for all the side