2024-02-03 07:00:02

梯度边界

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

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

但这并不奏效。

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


当前回答

试试下面的例子:

.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;
}

其他回答

Mozilla目前只支持CSS渐变作为background-image属性的值,以及在简写背景中。

——https://developer.mozilla.org/en/CSS/-moz-linear-gradient

Example 3 - Gradient Borders

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px; 

——http://www.cssportal.com/css3-preview/borders.htm

试试下面的例子:

.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;
}

试试这个,对我很管用。

div { border - radius: 20 px; 身高:70 vh; 溢出:隐藏; } {前div:: 内容:”; 显示:块; box-sizing: border-box; 高度:100%; 边框:1em实心透明; 边界图像:线性渐变(到顶部,红色0%,蓝色100%); border-image-slice: 1; } < div > < / div >

这是小提琴的链接 https://jsfiddle.net/yash009/kayjqve3/1/希望这对你有所帮助

border-image属性可以实现这一点。您还需要指定border-style和border-width。

border-image: linear-gradient(#f6b73c, #4d9f0c) 30;
border-width: 4px;
border-style: solid;

在MDN上阅读更多。

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

.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/