html – CSS边框颜色成4种颜色
发布时间:2020-12-14 18:59:27 所属栏目:资源 来源:网络整理
导读:有什么办法可以在CSS边框的一边有4种不同的颜色吗?我目前有 #header{border-color:#88a9eb;} 我想要一个4个纯色的边框,每个25%的分割,这是可能吗? 我想制作一个这样的固体版本,而不是两者之间的白色位. 解决方法 您可以使用border-image属性创建具有4种颜
有什么办法可以在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="https://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="https://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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |