html边框自动变颜色,html – CSS边框颜色成4种颜色

您可以使用border-image属性创建具有4种颜色的渐变边框.通常梯度逐渐从一种颜色逐渐移动到另一种颜色,并产生模糊效果,但设置

color-stops(百分比值)使得一种颜色的终点与下一种颜色的起始点相同,使得颜色变为硬停止,从而最终产生阻挡效应.

可以通过更改边框图像宽度和渐变方向将边框设置为所需边.例如,底部边框需要梯度从左到右,而左和右右边界需要梯度从上到下.

梯度使用大小(和颜色停止)的百分比值,因此它们在默认情况下是响应的,并且即使容器的尺寸发生变化,也可以自动调整.

目前使用border-image的唯一缺点是该属性的poor browser support. IE10-不支持此属性.

.bordered-top {

border-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);

border-image-slice: 1;

border-image-width: 4px 0px 0px 0px;

}

.bordered-bottom {

border-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);

border-image-slice: 1;

border-image-width: 0px 0px 4px 0px;

}

.bordered-left {

border-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);

border-image-slice: 1;

border-image-width: 0px 0px 0px 4px;

}

.bordered-right {

border-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);

border-image-slice: 1;

border-image-width: 0px 4px 0px 0px;

}

div {

height: 100px;

width: 300px;

padding: 10px;

background: beige;

margin: 10px;

}

Border only on top

Border only on bottom

Border only on left

Border only on right

对于IE10支持,您可以使用渐变来为background-image属性而不是border-image模仿相同的行为,如下面的代码段所示.

与边框图像不同,这里边框应用的边不能使用border-image-width进行控制,因此我们必须使用背景位置来将图像放置在所需的位置.

背景大小决定边框的厚度.对于顶级&底部边框,x轴中的大小应为100％,y轴中的大小为边框的厚度.对于左和右边框,y轴的大小应为100％,x轴的大小为边框的厚度.

.bordered-top {

background-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);

background-size: 100% 4px;

background-repeat: no-repeat;

background-position: 0% 0%;

}

.bordered-bottom {

background-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);

background-size: 100% 4px;

background-repeat: no-repeat;

background-position: 0% 100%;

}

.bordered-left {

background-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);

background-size: 4px 100%;

background-repeat: no-repeat;

background-position: 0% 0%;

}

.bordered-right {

background-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);

background-size: 4px 100%;

background-repeat: no-repeat;

background-position: 100% 0%;

}

div {

height: 100px;

width: 300px;

padding: 10px;

background: beige;

margin: 10px;

}

Border only on top

Border only on bottom

Border only on left

Border only on right