2024-02-03 07:00:02

梯度边界

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

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

其他回答

为了获得跨浏览器支持,你也可以用:before或:after来模拟渐变边框,这取决于你想做什么。

渐变边框的例子

使用border-image css属性

credit to: border-image

.grad-border { 身高:1 px; 宽度:85%; 保证金:0自动; 显示:flex; } .left-border, .right-border { 宽度:50%; Border-bottom: 2px solid #695f52; 显示:inline-block; } .left-border { Border-image:线性梯度(270deg, #b3b3b3, #fff) 1; } .right-border { 边界图像:线性梯度(90度,#b3b3b3, #fff) 1; } < div class = " grad-border”> < div class = "左边框" > < / div > < div class = "右边界" > < / div > < / div >

试试下面的例子:

.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/希望这对你有所帮助

试试这个,在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 >