Question

我尝试（并成功）使用border-image和linear-gradient创建设计。我的问题是我不确定我做了什么。语法令我困惑。我知道一系列颜色是从颜色到颜色逐渐消失的方式，第一个值表示方向，但最后的1 25%是一个完整的谜。我经常使用这些值和to bottom right，但无法弄清楚它们是如何相互关联的。有人可以解释每个值的含义吗？

如果您可以告诉我如何使用-webkit-，-moz-和-o-版本获得相同的效果，则可获得积分。如果您也可以解释这些语法，可以获得奖励积分。

.box {
  width: 100px;
  height: 100px;
  
  border-image: linear-gradient(to bottom right, black, white, black, white, black) 1 25%;
  
 /*   -webkit-border-image: -webkit-gradient(linear, 0 0, 100% 100%, from(black), to(white)) 1 100%;
     -webkit-border-image:  -webkit-linear-gradient(black, white, black, white, black) 1 100%;
     -moz-border-image: -moz-linear-gradient(black, white) 1 100%;
     -o-border-image: -o-linear-gradient(black, white) 1 100%; */

}

<div class="box"></div>

Answer 1

linear gradient创建一个<image>，表示颜色的线性渐变。

这里是linear gradient的解释。

linear-gradient( 
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  and <color-stop>     = <color> [ <percentage> | <length> ]?

浏览器特定的默认值。

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) // Safari / Chrome
-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+); // Firefox
linear-gradient( [ [ <angle> | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+); // Normal

参考：
https://www.w3.org/TR/css3-images/#linear- https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
http://www.the-art-of-web.com/css/linear-gradients/

Answer 2

我认为是这样的。

border-image-slice: 1 25%

这是文档MDN Border image and attributes

CSS border-image线性渐变

2 个答案: