线性渐变圆角

Question

线性渐变圆角

3

我正在使用线性渐变创建背景图像。如何为每个线性渐变添加圆角？

请在不更改HTML的情况下提供解决方案（不能使用多个div）。

.myStyle {

  height:500px;
  width: 900px;
  
  background-image:
    linear-gradient(lightgrey , blue),
    linear-gradient(lightgrey , blue),
    linear-gradient(lightgrey , blue), 
    linear-gradient(lightgrey , blue);

  background-repeat: no-repeat;

  background-size:
    100px 40px, 
    500px 60px,
    250px 50px,
    250px 60px; 

  background-position:
    0 0,
    0 80px,
    0 160px,
    0 220px;
}

<div class="myStyle"></div>

- user11804236

你需要它只是实色块，还是需要这些渐变颜色？ - Kaiido

渐变颜色 - user11804236

3个回答

3

可能最干净的方法是使用SVG而不是CSS渐变。

您可以将其作为数据URI加载到background-image属性中。要创建圆角，可以使用rx 和ry 属性来自<rect> 元素。使用SVG的<linearGradient>元素创建渐变。

.mystyle {
  height: 900px;
  width: 500px;
  background-image: url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='500' height='900' viewBox='0 0 500 900'><defs><linearGradient id='blue-grad' gradientTransform='rotate(90)'><stop stop-color='lightgrey' offset='0%'/><stop stop-color='blue' offset='100%'/></linearGradient></defs><rect x='0' y='0' width='100' height='40' rx='15' fill='url(%23blue-grad)'/><rect x='0' y='80' width='500' height='60' rx='15' fill='url(%23blue-grad)'/><rect x='0' y='160' width='250' height='50' rx='15' fill='url(%23blue-grad)'/><rect x='0' y='220' width='250' height='60' rx='15' fill='url(%23blue-grad)'/></svg>");
  background-size: cover;
  background-repeat: no-repeat;
}

/*
  SVG Image unminified:
  
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="900">
  <defs>
    <linearGradient id="blue-grad" gradientTransform="rotate(90)">
      <stop stop-color="lightgrey" offset="0%"/>
      <stop stop-color="blue" offset="100%"/>
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="100" height="40" rx="15" fill="url(#blue-grad)"/>
  <rect x="0" y="80" width="500" height="60" rx="15" fill="url(#blue-grad)"/>
  <rect x="0" y="160" width="250" height="50" rx="15" fill="url(#blue-grad)"/>
  <rect x="0" y="220" width="250" height="60" rx="15" fill="url(#blue-grad)"/>
</svg>
*/

<div class="mystyle"></div>

- Kaiido

-1

也许可以尝试这种方法，而不是让一个 div 输出多个渐变框？

.myStyle {
  width:150px;
  height:100px;
  background:linear-gradient(black,purple);
  border-radius:20px;
}

<div class="myStyle"></div>

- keanu_reeves

只有一个线性渐变时才有效。对于多个线性渐变不起作用。请帮我提供一个针对一个 div 本身的解决方案。 - user11804236

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

不太确定你的目标是什么，但如果你想让具有纯色渐变的圆角，则可以使用多个线性渐变和径向渐变来构建它。

这里是一个示例，我使用CSS变量轻松定义位置、大小和半径。这是你的一个渐变效果。你需要将此代码重复应用到所有渐变上，并调整不同的值。

.box {
  --w:200px; /*Gradient width*/
  --h:100px; /*Gradient height*/
  --r:10px;  /*Gradient radius*/
  --x:50px;  /*Gradient position x*/
  --y:40px;  /*Gradient position y*/
  --c:grey;  /*Gradient color*/
  margin:0;
  height:100vh;
  background:
    radial-gradient(farthest-side,var(--c) 98%,transparent 100%) var(--x)  var(--y) / calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side,var(--c) 98%,transparent 100%) calc(var(--x) + var(--w) - 2*var(--r)) var(--y) / calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side,var(--c) 98%,transparent 100%) var(--x) calc(var(--y) + var(--h) - 2*var(--r)) / calc(2*var(--r)) calc(2*var(--r)),
    radial-gradient(farthest-side,var(--c) 98%,transparent 100%) calc(var(--x) + var(--w) - 2*var(--r)) calc(var(--y) + var(--h) - 2*var(--r)) / calc(2*var(--r)) calc(2*var(--r)),
    
    linear-gradient(var(--c),var(--c)) calc(var(--x) + var(--r)) var(--y) / calc(var(--w) - 2*var(--r)) var(--h),
    linear-gradient(var(--c),var(--c)) var(--x) calc(var(--y) + var(--r)) / var(--w)  calc(var(--h) - 2*var(--r));
  background-repeat:no-repeat;
  
  width:300px;
  height:200px;
  display:inline-block;
  border:1px solid;
}

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

<div class="box" style="--w:80px;--r:30px;--c:red;"></div>

<div class="box" style="--h:80px;--r:40px;--x:5px;--y:5px;--c:blue"></div>