html – CSS边框颜色成4种颜色

概述有什么办法可以在CSS边框的一边有4种不同的颜色吗？我目前有 #header{border-color:#88a9eb;} 我想要一个4个纯色的边框,每个25％的分割,这是可能吗？ 我想制作一个这样的固体版本,而不是两者之间的白色位. 您可以使用border-image属性创建具有4种颜色的渐变边框.通常梯度逐渐从一种颜色逐渐移动到另一种颜色,并产生模糊效果,但设置 color-stops( 有什么办法可以在CSS边框的一边有4种不同的颜色吗？我目前有

#header{border-color:#88a9eb;}

我想要一个4个纯色的边框,每个25％的分割,这是可能吗？

我想制作一个这样的固体版本,而不是两者之间的白色位.

解决方法 您可以使用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%,33) 50%,rgb(124,196,236) 50%,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,17) 75%);  border-image-slice: 1;  border-image-wIDth: 0px 0px 4px 0px;}.bordered-left {  border-image: linear-gradIEnt(to bottom,17) 75%);  border-image-slice: 1;  border-image-wIDth: 0px 0px 0px 4px;}.bordered-right {  border-image: linear-gradIEnt(to bottom,17) 75%);  border-image-slice: 1;  border-image-wIDth: 0px 4px 0px 0px;}div {  height: 100px;  wIDth: 300px;  padding: 10px;  background: beige;  margin: 10px;}

<!-- library added only for old browser support --><script src="@R_301_6822@s://cdnjs.cloudflare.com/AJAX/libs/prefixfree/1.0.7/prefixfree.min.Js"></script><div class='bordered-top'>border only on top</div><div class='bordered-bottom'>border only on bottom</div><div class='bordered-left'>border only on left</div><div class='bordered-right'>border only on right</div>

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

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

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

.bordered-top {  background-image: linear-gradIEnt(to right,17) 75%);  background-size: 100% 4px;  background-repeat: no-repeat;  background-position: 0% 0%;}.bordered-bottom {  background-image: linear-gradIEnt(to right,17) 75%);  background-size: 100% 4px;  background-repeat: no-repeat;  background-position: 0% 100%;}.bordered-left {  background-image: linear-gradIEnt(to bottom,17) 75%);  background-size: 4px 100%;  background-repeat: no-repeat;  background-position: 0% 0%;}.bordered-right {  background-image: linear-gradIEnt(to bottom,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;}

<!-- library added only for old browser support --><script src="@R_301_6822@s://cdnjs.cloudflare.com/AJAX/libs/prefixfree/1.0.7/prefixfree.min.Js"></script><div class='bordered-top'>border only on top</div><div class='bordered-bottom'>border only on bottom</div><div class='bordered-left'>border only on left</div><div class='bordered-right'>border only on right</div>

总结

以上是内存溢出为你收集整理的html – CSS边框颜色成4种颜色全部内容，希望文章能够帮你解决html – CSS边框颜色成4种颜色所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。