带圆角的线性渐变

Question

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

请在 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>

Answer 1

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

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

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

Answer 2

不太确定您的目标是什么，但如果您希望纯色渐变具有半径，您可以使用多个线性渐变和径向渐变来构建它。

这是我使用 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>

Answer 3

最干净的实际上可能是为此使用 svg 而不是 css-gradients。

您将在背景图像属性中将其作为 data-uri 加载。
要制作圆角，可以使用 rx and ry attributes of the <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>

带圆角的线性渐变

Linear Gradient with Round corners

css

linear-gradients