是否仅为上边缘和下边缘创建线性渐变边框？ [英] Create linear gradient border for top and bottom edges only?

问题描述

使用下面的代码，我只能为元素的底边生成线性渐变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-imageLike来产生类似的效果。这在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>

这篇关于是否仅为上边缘和下边缘创建线性渐变边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！