2024-02-03 07:00:02

梯度边界

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

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

但这并不奏效。

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


当前回答

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

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

在MDN上阅读更多。

其他回答

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

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

在MDN上阅读更多。

试试这个,在web-kit上工作很好

.border { 宽度:400 px; 填充:20 px; border-top: 10px solid #FFFF00; border-bottom:10px solid #FF0000; 背景图片: 线性渐变(# FFFF00 # FF0000), 线性渐变(# FFFF00 # FF0000) ; background-size: 10 px 100%; 背景位置:0 0,100% 0; 平铺方式:不再重演; } < div class = "边境”>你好!< / div >

试试这段代码

.gradientBoxesWithOuterShadows { 
height: 200px;
width: 400px; 
padding: 20px;
background-color: white; 

/* outer shadows  (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4); 
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);

/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;

/* gradients */
background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5)); 
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%); 
}

或者可以参考这个小提琴:http://jsfiddle.net/necolas/vqnk9/

渐变边框来自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; 
}

最直接的方法是使用border-image属性。你可以使用任何你想要的线性渐变或重复渐变。对于线性梯度,边界图像切片属性需要为1。

.gradient-border {
    border-style: solid;
    border-width: 2px;
    border-image: linear-gradient(45deg, red, blue) 1;
}

参考文献 MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice 数字海洋- https://www.digitalocean.com/community/tutorials/css-gradient-borders-pure-css