是否仅为上边缘和下边缘创建线性渐变边框?
使用下面的代码,我只能为元素的底边生成线性渐变border-image
。我如何修改代码以使其顶部也有一个代码?
div {
/* gradient shining border */
border-style: solid;
border-width: 3px;
-webkit-border-image: -webkit-linear-gradient(
left,
rgba(0,0,0,1) 1%,
rgba(0,255,255,1) 50%,
rgba(0,0,0,1) 100%
) 0 0 100% 0/0 0 3px 0 stretch;
-moz-border-image: -moz-linear-gradient(
left,
rgba(0,0,0,1) 1%,
rgba(0,255,255,1) 50%,
rgba(0,0,0,1) 100%
) 0 0 100% 0/0 0 3px 0 stretch;
-o-border-image: -o-linear-gradient(
left,
rgba(0,0,0,1) 1%,
rgba(0,255,255,1) 50%,
rgba(0,0,0,1) 100%
) 0 0 100% 0/0 0 3px 0 stretch;
border-image: linear-gradient(
to left,
rgba(0,0,0,1) 1%,
rgba(0,255,255,1) 50%,
rgba(0,0,0,1) 100%
) 0 0 100% 0/0 0 3px 0 stretch;
}
当前产量:
解决方案
您正在使用速记border-image
属性来设置渐变的大小,并且根据提供的值,上、左、右边框将被取消。
将100%
设置为顶部边框渐变的宽度,将3px
设置为其高度,将导致仅在顶部和底部应用渐变。
border-image: linear-gradient(to left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%)
100% 0 100% 0/3px 0 3px 0 stretch;
在上述代码行中,100% 0 100% 0/3px 0 3px 0
表示每边渐变边框的大小(读作[top] [right] [bottom] [left]
)。原来是0 0 100% 0/0 0 3px 0
。
div {
/* gradient shining border */
border-style: solid;
border-width: 3px;
border-image: linear-gradient(to left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%)
100% 0 100% 0/3px 0 3px 0 stretch;
/* other demo stuff */
height: 50px;
line-height: 50px;
background-color: #222;
color: white;
text-align: center;
}
<div>Some content</div>
请注意,如果需要支持IE10及更低版本,
border-image
property still has pretty low browser support和将不起作用。不过,您可以在下面的代码片断中使用background-image
Like来产生类似的效果。这在IE10中也适用(但在IE9中仍然不起作用--因为IE9根本不支持渐变)。
div {
/* gradient shining border */
background-image: linear-gradient(to left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%),
linear-gradient(to left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%);
background-size: 100% 3px;
background-position: 0% 0%, 0% 100%;
background-repeat: no-repeat;
/* other demo stuff */
height: 50px;
line-height: 50px;
background-color: #222;
color: white;
text-align: center;
}
<div>Some content</div>
相关文章