梯度边界

我试图应用一个渐变的边界，我认为这是简单的这样做:

border-color: -moz-linear-gradient(top, #555555, #111111);

但这并不奏效。

有人知道做边界渐变的正确方法吗?

当前回答

渐变边框来自Css-Tricks: http://css-tricks.com/examples/GradientBorder/

.multbg-top-to-bottom {
  border-top: 3px solid black;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image:
      -moz-linear-gradient(#000, transparent),
      -moz-linear-gradient(#000, transparent);
  background-image:
      -o-linear-gradient(#000, transparent),
      -o-linear-gradient(#000, transparent);
  background-image: 
      linear-gradient(#000, transparent),
      linear-gradient(#000, transparent);
  -moz-background-size: 3px 100%;
  background-size: 3px 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat; 
}

2014-10-27 14:23:25

其他回答

渐变边框来自Css-Tricks: http://css-tricks.com/examples/GradientBorder/

.multbg-top-to-bottom {
  border-top: 3px solid black;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image:
      -moz-linear-gradient(#000, transparent),
      -moz-linear-gradient(#000, transparent);
  background-image:
      -o-linear-gradient(#000, transparent),
      -o-linear-gradient(#000, transparent);
  background-image: 
      linear-gradient(#000, transparent),
      linear-gradient(#000, transparent);
  -moz-background-size: 3px 100%;
  background-size: 3px 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat; 
}

2014-10-27 14:23:25

border-image-slice将扩展CSS的border-image渐变

这(正如我所理解的)阻止了默认的“图像”切片-没有它，如果边界只在一侧，什么都不会出现，如果它围绕整个元素，每个角落会出现四个微小的梯度。

身体{ 边框:16px实体透明; 边界图像:线性渐变(45度，红，黄); border-image-slice: 1; 身高:120 px; border - radius: 10 px;/*将没有影响*/ ｝

2016-11-22 17:23:22

试试下面的例子:

.border-gradient {
      border-width: 5px 5px 5px 5px;
      border-image: linear-gradient(45deg, rgba(100,57,242,1) 0%, rgba(242,55,55,1) 100%);
      border-image-slice: 9;
      border-style: solid;
}

2019-10-01 16:39:27

这是一个带有透明背景的渐变边界，使用边界半径

.gradient-border {
  border-radius: 999px;
  padding: 10px 3rem;
  display: inline-block;
  position: relative;
  background: transparent;
  border: none;
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 9999px;
  background: linear-gradient(87.36deg, blue 6.42%, red 84.24%),
linear-gradient(0deg, #FFFFFF, #FFFFFF);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
          mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

现场演示:https://jsfiddle.net/jbernier/0eypxc74/1/

2022-11-29 00:07:16

这里有一篇很好的css技巧文章:https://css-tricks.com/gradient-borders-in-css/

我能够想出一个非常简单的，单元素的解决方案，使用多个背景和background-origin属性。

.wrapper {
  background: linear-gradient(#222, #222), 
              linear-gradient(to right, red, purple);
  background-origin: padding-box, border-box;
  background-repeat: no-repeat; /* this is important */
  border: 5px solid transparent;
}

这种方法的优点是:

它不受z指数的影响它可以通过改变透明边框的宽度来轻松缩放

去https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100看看吧

2019-04-19 20:24:11

推荐文章

最新文章

标签