为容器设置CSS渐变

Question

我有一个容器（div），我正在尝试像图片一样应用边框：

border-radius: 30px;
background-image: linear-gradient(90deg, rgba(238,237,244,1) 0%, rgba(252,252,252,1) 0%, rgba(142,224,240,1) 61%, rgba(250,250,250,0.9878326330532213) 100%);
background-origin: border-box;
background-clip: content-box, border-box;
border: double 1em transparent;

您能帮助我了解在“线性渐变css规则”中必须设置哪些颜色才能获得相同的图像结果？

Answer 1

这不是您可以对一个渐变进行的操作。我会考虑this previous answer来近似：

.box {
  --r:10px;     /* radius   */
  --g1:rgba(252,252,252,1) 0%, #79aecf; 
  --g2:#79aecf 0%, rgba(252,252,252,1); 

  --rg1:transparent 50%,rgba(252,252,252,1) 55%, #79aecf; 
  --rg2:transparent 50%,#79aecf 55%, rgba(252,252,252,1); 
  border-radius:calc(2*var(--r));
  padding:calc(2*var(--r) + 5px);

  background:
    /*corners*/
    radial-gradient(farthest-side at bottom right,var(--rg2)) top    left /calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side at top    right,var(--rg1)) bottom left /calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side at bottom left ,var(--rg2)) top    right/calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side at top    left ,var(--rg1)) bottom right/calc(2*var(--r)) calc(2*var(--r)),
    /* borders*/
    linear-gradient(to top   ,var(--g2)) top   /calc(100% - 4*var(--r)) var(--r),
    linear-gradient(to bottom,var(--g1)) bottom/calc(100% - 4*var(--r)) var(--r),
    linear-gradient(to right ,var(--g1)) right /var(--r) calc(100% - 4*var(--r)),
    linear-gradient(to left  ,var(--g2)) left  /var(--r) calc(100% - 4*var(--r));
  background-repeat:no-repeat;
  
  margin:10px;
  width:300px;
  height:200px;
  box-sizing:border-box;
  display:inline-block;
  filter:drop-shadow(10px 8px 15px #000);
}

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

Answer 2

这不是您可以使用CSS实现的功能。而且您的CSS应该是这样的：

.ok {
height:50px;
width:50px;
border-width: 3px;
    border-style: solid;
    -webkit-border-image: 
      -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;    
    -o-border-image:
      -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%;
}

<div class="ok">